Angular JS 将结果从 api 绑定到下拉菜单答案

【问题标题】：Angular JS bind results from api to dropdown menuAngular JS 将结果从 api 绑定到下拉菜单
【发布时间】：2014-07-25 10:58:57
【问题描述】：

大家好，我正在尝试获取从 api 返回的数据：

[{"Language":{"Id":1,"Name":"English"},"Occupations":[{"Id":1,"Name":"Banquet Server"},{"Id":2,"Name":"Bar Tender"},{"Id":3,"Name":"Catering Manager"}]

并使用 Angular JS 将其绑定到下拉菜单：

$scope.industry = [];

    $http.get('/industrygroup?languageid=1')
        .then(function (result) {
            $scope.industry = result.data;
        });

这是 HTML 布局

<select class="form-control" style="width:25% !important; margin-bottom:20px;" ng-model="industry">

但我的下拉菜单显示为空白......我想做的是显示上面 json 中的每个名称......有人有什么建议吗？下面是更多 Angular JS 代码：

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

myApp.controller('WizardController', function($scope){

    $scope.industry = [];

    $http.get('/industrygroup?languageid=1')
        .then(function (result) {
            $scope.industry = result.data;
        });

  $scope.user = {
    agree: null
  };

});

$scope.user 是我用来从输入字段中收集数据的工具。

【问题讨论】：

请在下拉菜单中显示您希望出现的项目。此外，选择标记上的ng-model 是选定项，而ng-options 用于定义可用项。
我要做的是显示json中的每个名称
哪些名字？ “语言/职业”或“英语”或“宴会服务员/酒吧服务员”

标签： javascript jquery angularjs

【解决方案1】：

也许你需要

*.js

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

myApp.controller('WizardController', function($scope){

    $scope.industry = [];

    $http.get('/industrygroup?languageid=1')
        .then(function (result) {
            $scope.industry = result.data;
        });

  $scope.user = {
    agree: null
  };
  $scope.selected = null;

});

*.html

<select data-ng-options="p.Name for p in industry[0].Occupations" data-ng-model="selected">
</select>

还有

如果你的 json 包含很多这样的对象：

[{
    "Language": {
      "Id": 1,
      "Name": "English"
    },
    "Occupations": [{
      "Id": 1,
      "Name": "Banquet Server"
    }, {
      "Id": 2,
      "Name": "Bar Tender"
    }, {
      "Id": 3,
      "Name": "Catering Manager"
    }]
  } ,
  {
    "Language": {
      "Id": 2,
      "Name": "English2"
    },
    "Occupations": [{
      "Id": 4,
      "Name": "Banquet Server 2"
    }, {
      "Id": 5,
      "Name": "Bar Tender 2"
    }, {
      "Id": 6,
      "Name": "Catering Manager 2"
    }]
  }, ...];

你想要所有职业名称你可以做到：

*.js

$scope.Options = function()
{
   var data =[];

   for(var i = 0;i < $scope.industry.length;i++)
       for(var j = 0;j < $scope.industry[i].Occupations.length;j++)
           data.push($scope.industry[i].Occupations[j].Name);

    return data;
}

*.html

<select>
   <option ng-repeat="op in Options()">{{op}}</option>
</select>

【讨论】：

ng-options 需要 ng-model，所以这不会像介绍的那样工作。它也与 OP 呈现的 JSON 的结构不匹配。
我使用 ng-options="p.Occupations.name for p in Industry" 和 ng-model="user.industry" user.industry 用于保存下拉菜单的值跨度>
实际上这也行不通，因为 JSON 中没有 Occupations.name 属性。我认为他们可能想要的是列举职业名称，所以可能类似于<select ng-options="p.name for p in industry[0].Occupations">，但他们确实必须澄清才能确定
是的@MarcKline 它不是 100% 清楚，如果你想编辑我的答案
啊，现在我收到一条错误消息，说 $http 未定义。

【解决方案2】：

请查看此plnkr

标记需要如下所示：

<select ng-model="occupation" ng-options="occ.Name for occ in industry[0].Occupations"></select>

industry 是一个数组，因此您需要访问第一个数组（根据您的示例数据）
在里面你想循环Occupations来得到你想要的occ
你想显示Name所以通过occ.Name引用它

注意：控制器正在使用 timeout 来模拟 plnkr 中的 $http 承诺解析

【讨论】：