如何从 API JSON 数据创建下拉列表答案

【问题标题】：How to create a drop down from API JSON data如何从 API JSON 数据创建下拉列表
【发布时间】：2018-02-23 08:23:54
【问题描述】：

我是 AngularJS 的 Webapi 新手。我有一个 URL，它将以JSON 格式提供数据，我只需要从给定数据中捕获员工姓名，并将其放入AngularJS 的下拉列表中。任何帮助表示赞赏。

【问题讨论】：

标签： javascript html angularjs asp.net-web-api

【解决方案1】：

正确的做法是使用ng-options directive。 HTML 看起来像这样。

<select ng-model="selectedTestAccount" 
        ng-options="item.Id as item.Name for item in testAccounts">
    <option value="">Select Account</option>
</select>

JavaScript：

angular.module('test', []).controller('DemoCtrl', function ($scope, $http) {
    $scope.selectedTestAccount = null;
    $scope.testAccounts = [];

    $http({
            method: 'GET',
            url: '/your-api-url',
        }).success(function (result) {
        $scope.testAccounts = result;
    });
});

您还需要确保 Angular 在您的 HTML 上运行并且您的模块已加载。

<html ng-app="test">
    <body ng-controller="DemoCtrl">
    ....
    </body>
</html>

【讨论】：

【解决方案2】：

请看一下这个简单的完全合格的demo fiddle。

查看：

<div ng-controller="MyCtrl">
  <select ng-model="selected" 
          ng-options="option.name for option in options"></select>
</div>

AngularJS 应用程序：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope, $http) {
    $scope.options = [];
    $scope.selected = null;

    $http({
      method: 'GET',
      url: 'https://jsonplaceholder.typicode.com/users'
    }).then(function (result) {
      $scope.options = result.data;
      $scope.selected = $scope.options[0];
    });;
});

【讨论】：

【解决方案3】：

你可以试试这个<select name="{{option.empname}}" ng-model="modelName" ng-options="option for option in empdetail"> </select>

更多详情请参考here

【讨论】：

【解决方案4】：

您可以使用 $filter 从 Json 数组中过滤掉数据，如下所示，

$filter('filter')(你的 json 数组, { column name: value}, true)

希望这会有所帮助。

【讨论】：