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：

将其绑定到下拉菜单

$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的每个名字.....任何人都有任何建议吗？这里有一些角度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>

Answer 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承诺解析

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

2 个答案: