javascript - Angular JS 将 api 的结果绑定(bind)到下拉菜单

Question

你好，我正在尝试获取从 api 返回的数据:

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

并使用 angular JS 将其绑定(bind)到下拉菜单:

$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 是我用来从输入字段收集数据的。

Answer 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>