angularjs中选择选项的嵌套列表答案

【问题标题】：Nested list for select option in angularjsangularjs中选择选项的嵌套列表
【发布时间】：2017-01-04 08:59:35
【问题描述】：

angularjs 的新手

我有如下的json对象

data =
[{ company : "companyA", headOffice : "cityA", industry :"software", transactionCurency : "USD" , otherAspect :{numberofEmployees : "10000", public : "yes", listed : "NYSE"}},

{ company : "companyB", headOffice : "cityA", industry :"software", transactionCurency : "USD" , otherAspect :{numberofEmployees : "20000", public : "no", listed : "NA"}},

{ company : "companyC", headOffice : "cityB", industry :"Oil", transactionCurency : "EUR" , otherAspect :{numberofEmployees : "150000", public : "yes", listed : "LSE"}},
{ company : "companyD", headOffice : "cityX", industry :"manufactoring", transactionCurency : "YEN" , otherAspect :{numberofEmployees : "30000", public : "yes", listed : "TSE"}
},

{ company : "companyE", headOffice : "cityB", industry :"Auto", transactionCurency : "EUR" , otherAspect :{numberofEmployees : "330000", public : "no", listed : "NA"}}];

我想在“otherAspect”内部列表的基础上创建下拉列表.. 如 numberOfEmployees ={3000,330000,1000, 20000}，同样列出 ="NYSE,NA,LSE,TSE"。

我尝试使用 ng-repeat 但它为每个对象创建了一个下拉列表，因此我有数百个下拉列表。

正如我所说，我也是这个论坛的新手 angularjs 我不确定我需要提供什么信息。谢谢

【问题讨论】：

标签： javascript angularjs json ng-repeat

【解决方案1】：

您可以使用ng-options：

<select ng-model="aspect" ng-options="d.otherAspect.listed for d in data"></select>

Demo on JSFiddle.

【讨论】：

【解决方案2】：

这样试试

HTML：

<div ng-app="myApp">
<div ng-controller="MyCtrl">
<select ng-model="aspect" ng-options="d.otherAspect.listed for d in data">
</select>
<br/>Selected: {{aspect}}
</div>
</div>

Javascript：

 var myApp = angular.module('myApp', []);
 myApp.controller('MyCtrl', ['$scope', function($scope) {
 $scope.data = [{
  company: "companyA",
  headOffice: "cityA",
  industry: "software",
  transactionCurency: "USD",
  otherAspect: {
    numberofEmployees: "10000",
    public: "yes",
    listed: "NYSE"
  }
},

{
  company: "companyB",
  headOffice: "cityA",
  industry: "software",
  transactionCurency: "USD",
  otherAspect: {
    numberofEmployees: "20000",
    public: "no",
    listed: "NA"
  }
},

{
  company: "companyC",
  headOffice: "cityB",
  industry: "Oil",
  transactionCurency: "EUR",
  otherAspect: {
    numberofEmployees: "150000",
    public: "yes",
    listed: "LSE"
  }
}, {
  company: "companyD",
  headOffice: "cityX",
  industry: "manufactoring",
  transactionCurency: "YEN",
  otherAspect: {
    numberofEmployees: "30000",
    public: "yes",
    listed: "TSE"
  }
},

{
  company: "companyE",
  headOffice: "cityB",
  industry: "Auto",
  transactionCurency: "EUR",
  otherAspect: {
    numberofEmployees: "330000",
    public: "no",
    listed: "NA"
  }
}
];
}]);

【讨论】：