Question

对angularjs来说是新的，所以它可能是一件微不足道的事情，但不知何故无法得到它。我有一个对象数组，并且在每个对象中还有另一个对象数组

filteredList=[{Company : "IBX", CEO : "ABC", HeadOffice : "US" ,locations : [{Location : "US", RegionalCEO : "ABC"},{Location : "India", RegionalCEO : "CDE"},{Location : "UK", RegionalCEO : "FGH"}]},{Company : "Micr$",HeadOffice : "US", CEO : "Gill", locations : [{Location : "US", RegionalCEO : "Gill"},{Location : "India", RegionalCEO : "QWE"},{Location : "Singapore", RegionalCEO : "XYX"},{Location : "Aus", RegionalCEO : "ZEB"}]},{Company : "Inf",HeadOffice : "India", CEO : "NMrt", locations : [{Location : "India", RegionalCEO : "Nmrt"},{Location : "US", RegionalCEO : "PhM"},{Location : "Denmark", RegionalCEO : "Zyqes"},{Location : "Philipines", RegionalCEO : "Pinesad"},{Location : "Taiwan", RegionalCEO : "Abur"},{Location : "UAE", RegionalCEO : "Abuf"}]}]

There  are more properties but in the interest of time I am posting just important ones. 
So I need to populate drop downs with Location (UK, US, India,UAE,Philipines etc.) and RegionalCEO

我试过的是：＆LT;选择名称=＆＃34;位置＆＃34; NG-模型=＆＃34; LOCAT＆＃34; ng-options =＆＃34; item.Location for filteredList [0] .locations＆＃34;＆gt;

The above code does not display all values, as I suspected then I tried below , after reading few posts 
<select name="locations">
<option ng-repeat-start ="locations in filteredList">
</option>
<option ng-repeat-end ng-repeat="Location in locations" value="{ Location}">{Location}</option>

</select>
This displays empty drop down !!!!

Am I trying something impossible ? :) , the data cannot be modified as it provided from another source.

Thank you in advance.

Answer 1

那里有一点点错误，首先你需要明白ng-repeat只是在for循环中迭代你的数据。所以假设您想通过使用for循环从给定数组中提取位置。该代码将是

for( var i = 0;i< filteredList.length; i++){
         currentItem = filteredList[i]; 
         //when i=0,  current item = {Company : "IBX", CEO : "ABC", HeadOffice : "US" ,locations : [{Location : "US", RegionalCEO : "ABC"},{Location : "India", RegionalCEO : "CDE"},{Location : "UK", RegionalCEO : "FGH"}]}

         //now extract the locations
         var locationsArray = currentItem.locations;
         for( var j = 0 ;j < locationsArray.length ; j++ ){
                 var location = locationsArray[j].Location; 
                 //for j=0 , location = "US"  
         }
}

现在在ng-repeat中使用此逻辑。

    <select name="locations">
    <option ng-repeat-start ="item in filteredList">
    <option ng-repeat-end  ng-repeat="location in item.locations" value="{{ location.Location}}">{{location.Location}}</option>
    </option>

    </select>

Answer 2

使用数组map()方法从对象数组中获取嵌套数组。您将使用此方法获取所有三个locations数组。
使用数组concat()方法合并要应用ng-repeat的嵌套数组。所以，来自不同locations数组的所有对象合并为一个数组

工作演示：

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    var filteredList = [{
	Company: "IBX",
	CEO: "ABC",
	HeadOffice: "US",
	locations: [{
		Location: "US",
		RegionalCEO: "ABC"
	}, {
		Location: "India",
		RegionalCEO: "CDE"
	}, {
		Location: "UK",
		RegionalCEO: "FGH"
	}]
}, {
	Company: "Micr$",
	HeadOffice: "US",
	CEO: "Gill",
	locations: [{
		Location: "US",
		RegionalCEO: "Gill"
	}, {
		Location: "India",
		RegionalCEO: "QWE"
	}, {
		Location: "Singapore",
		RegionalCEO: "XYX"
	}, {
		Location: "Aus",
		RegionalCEO: "ZEB"
	}]
}, {
	Company: "Inf",
	HeadOffice: "India",
	CEO: "NMrt",
	locations: [{
		Location: "India",
		RegionalCEO: "Nmrt"
	}, {
		Location: "US",
		RegionalCEO: "PhM"
	}, {
		Location: "Denmark",
		RegionalCEO: "Zyqes"
	}, {
		Location: "Philipines",
		RegionalCEO: "Pinesad"
	}, {
		Location: "Taiwan",
		RegionalCEO: "Abur"
	}, {
		Location: "UAE",
		RegionalCEO: "Abuf"
	}]
}];

var locationsArr = filteredList.map(function(item) {
  return item.locations;
});

$scope.finalArr = locationsArr[0].concat(locationsArr[1]).concat(locationsArr[2]);



});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select name="locations">
<option ng-repeat="locations in finalArr">
{{locations.Location}}
</option>
<option ng-repeat="locations in finalArr">{{locations.RegionalCEO}}</option>
</select>
</div>

＆＃13;

下拉列表中的嵌套数组

2 个答案: