数组中的数组，angularJS，ng-repeat
[英]Array in array, angularJS, ng-repeat
问题描述
我正在努力遍历数组中的数组。 我需要创建类似按钮的垂直菜单，并且无法正常工作。
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>
我需要做的是显示项目数组，并且在Orders项目处于活动状态时，使用其他数组中给出的元素将其展开。 老实说，我只是不知道该怎么做。
5 个解决方案
解决方案1
1 2016-09-19 11:14:11
您正在尝试对异构阵列进行ng-repeat 。 即它的元素不是全部相同的类型。 此处的实现逻辑需要更改。
如果您的数据结构不灵活，您可以做的一件事是使用typeof item === 'object'从字符串中过滤掉对象，或者相反地检查typeof字符串
解决方案2
0 2016-09-19 12:01:24
这是您可以使用的快速基本示例：
$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>
我建议您再深入看看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>
这更接近我想要实现的目标。 但我不知道如何将此嵌套UL应用于父级列表中的仅一个Li。
解决方案4
0 2016-09-19 12:56:28
该过滤器正常工作
输入：
['Home',{ 'Orders':{orders:['Orders', 'Open', 'Closed', 'New', 'Forgotten']}},'Users','Resources','Settings','Help']
输出：
["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
我相信，有这么多的方法来回答这个问题，尽管我做了一个样本plunker您problem.Below是如何在
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看起来像
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;
};
});
AngularJS 数组到 ng-repeat
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.