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

Posted 2023-02-22

【中文标题】Angular JS 将结果从 api 绑定到下拉菜单

【英文标题】：Angular JS bind results from api to dropdown menu

【发布时间】：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中的每个名称

哪些名字？ “语言/职业”或“英语”或“宴会服务员/酒吧服务员”

【参考方案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 承诺解析