数组中的数组，angularJS，ng-repeat
[英]Array in array, angularJS, ng-repeat
问题描述
im struggling with iterating over arrays in arrays. 
我正在努力遍历数组中的数组。 I need to create buttonlike vertical menu and cant get it work. 我需要创建类似按钮的垂直菜单，并且无法正常工作。
angular.module('NavigationApp',[]).controller('NavigationController', function($scope) { $scope.items = [ 'Home', 'Orders': { orders:['Orders', 'Open', 'Closed', 'New', 'Forgotten'] }, 'Users', 'Resources', 'Settings', 'Help' ]; $scope.activeMenu = $scope.items[0]; $scope.setActive = function(item) { $scope.activeMenu = item; }; });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> </head> <body ng-app="NavigationApp"> <div class="col-md-3"> <div ng-controller="NavigationController"> <input type="text" placeholder="Search" ng-model="filterQuery" /> <ul class="list-group"> <li ng-click="setActive(item)" ng-class="{active: activeMenu === item}" class="btn btn-lg list-group-item" ng-repeat="item in items | filter:filterQuery"><a href="#">{{ item }}</a> </li> </ul> </div> </div> <script src="js/MainController.js"></script> </body> </html>
What i need to do is display array of items and while Orders item is active expand it with elements given in other array. 我需要做的是显示项目数组，并且在Orders项目处于活动状态时，使用其他数组中给出的元素将其展开。 To be honest i just dont know how to make it. 老实说，我只是不知道该怎么做。
5 个解决方案
解决方案1
1 2016-09-19 11:14:11
You are trying to ng-repeat over a heterogeneus array. 您正在尝试对异构阵列进行ng-repeat 。 ie it's elements are not all of the same type. 即它的元素不是全部相同的类型。 The implementation logic needs to change here. 此处的实现逻辑需要更改。
One thing you can do if your data structure is not flexible, is to use a typeof item === 'object' to filter out the object from the strings, or conversely check for typeof string 如果您的数据结构不灵活，您可以做的一件事是使用typeof item === 'object'从字符串中过滤掉对象，或者相反地检查typeof字符串
解决方案2
0 2016-09-19 12:01:24
Here's a quick, basic example of what you could use: 这是您可以使用的快速基本示例：
$scope.items = [{
name: 'Home'
}, {
name: 'Orders',
dropdown: [{
name: 'Orders'
}]
},{
name: 'Users'
},
...
];
<li ng-repeat="item in items | filter:filterQuery" class="btn btn-lg list-group-item dropdown" ng-class="{active: activeMenu === item}" ng-click="setActive(item)">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">
{{ item.name }} <span class="caret" ng-if="item.dropdown"></span>
</a>
<ul ng-if="item.dropdown" class="dropdown-menu">
<li ng-repeat="dItem in item.dropdown">
<a href="#">{{dItem.name}}</a>
</li>
</ul>
</li>
I'd suggest having another indepth look at https://docs.angularjs.org/api/ng/directive/ngRepeat to fully understand the structure required by the directive. 我建议您再深入看看https://docs.angularjs.org/api/ng/directive/ngRepeat，以完全了解该指令所需的结构。
解决方案3
0 2016-09-19 12:26:32
angular.module('NavigationApp',[]).controller('NavigationController', function($scope) { $scope.items = { main:['Home','Orders','Users','Resources','Settings','Help'], sub:['Open','Closed','New','Forgotten'] }; $scope.activeMenu = $scope.items[0]; $scope.setActive = function(item) { $scope.activeMenu = item; }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> </head> <body ng-app="NavigationApp"> <div class="col-md-3"> <div ng-controller="NavigationController"> <input type="text" placeholder="Search" ng-model="filterQuery" /> <ul class="list-group"> <li ng-click="setActive(item)" ng-class="{active: activeMenu === item}" class="btn btn-lg list-group-item" ng-repeat="item in items.main | filter:filterQuery"><a href="#">{{ item }}</a> <ul> <li class="btn btn-lg list-group-item" ng-repeat="it in items.sub" ng-if="activeMenu === 'Orders'">{{it}}</li> </ul> </li> </ul> </div> </div> <script src="js/MainController.js"></script> </body> </html>
This is closer to what i want to achieve. 这更接近我想要实现的目标。 But i dont know how to apply this nested UL to only one Li from parent list. 但我不知道如何将此嵌套UL应用于父级列表中的仅一个Li。
解决方案4
0 2016-09-19 12:56:28
this filter work correctly 该过滤器正常工作
INPUT : 输入：
['Home',{ 'Orders':{orders:['Orders', 'Open', 'Closed', 'New', 'Forgotten']}},'Users','Resources','Settings','Help']
OUTPUT : 输出：
["Home", "Orders", "Open", "Closed", "New", "Forgotten", "Users", "Resources", "Settings", "Help"]
app.filter('customfilter', function () { return function (data) { function clean(item) { var result = [] ; // check if type is array if(Array.isArray(item)){ // parse array item.forEach(function(i){ result = result.concat(clean(i)); }) }// check if type is opject else if(typeof item =="object"){ // parse opject Object.keys(item).map(function (key) { result = result.concat(clean(item[key])); }); }else{ result= [item] } return result ; } return clean(data) ; } })
解决方案5
0 2016-09-19 13:53:26
I believe there are so many ways to answer this question,although I've made a sample plunker for your problem.Below is how your 我相信，有这么多的方法来回答这个问题，尽管我做了一个样本plunker您problem.Below是如何在
HTML will look like HTML看起来像
<body ng-app="NavigationApp">
<div class="col-md-3">
<div ng-controller="NavigationController">
<input type="text" placeholder="Search" ng-model="filterQuery" />
<ul class="list-group">
<li ng-click="setActive(item)" ng-class="{active: activeMenu === item}" class="btn btn-lg list-group-item" ng-repeat="item in items | filter:filterQuery">
<a href="#">
<p ng-hide="item.dropdown"> {{ item.name }}</p>
<p ng-show="item.dropdown" ng-repeat="values in item.dropdown"> {{ values }}</p>
</a>
</li>
</ul>
</div>
</div>
</body>
JS look like JS看起来像
angular.module('NavigationApp', []).controller('NavigationController', function($scope) {
var orderItemsObj = {
orders: ['Orders', 'Open', 'Closed', 'New', 'Forgotten']
};
$scope.items = [{
name: 'Home'
}, {
name: 'Orders',
dropdown: ['Orders', 'Open', 'Closed', 'New', 'Forgotten']
}, {
name: 'Users'
}, ];
$scope.activeMenu = $scope.items[0];
$scope.setActive = function(item) {
$scope.activeMenu = item;
};
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.