angular.js NG重复师 [英] angular.js ng-repeat division
本文介绍了angular.js NG重复师的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有类数组具有这样的结构：
{
名称：'东西'，
main_category：'A'
}
因此，每个类别都有它的主要类别。我想显示HTML的所有类别，像这样：
＆LT; H1＆gt;一种＆LT; / H1＆GT;
＆LT; UL＆GT;
＆LT;立GT;的类别列表中有A＆主要类别LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; H1＆GT; B＆LT; / H1＆GT;
＆LT; UL＆GT;
＆LT;立GT;类别列表有主类B＆LT; /李＆GT;
＆LT; / UL＆GT;
我应该如何实现呢？我发现的唯一办法就是做这样的事情：
＆LT; H1＆gt;一种＆LT; / H1＆GT;
＆LT; UL＆GT;
＆LT;李NG重复=类别中的大类NG-IF =category.main_category =='A'＆GT; ..＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; H1＆GT; B＆LT; / H1＆GT;
＆LT; UL＆GT;
＆LT;李NG重复=类别中的大类NG-IF =category.main_category =='B'＆GT; ..＆LT; /李＆GT;
＆LT; / UL＆GT;
它的工作原理，但我不认为这是一个好主意。
解决方案
您应该使用 HTTPS提供GROUPBY过滤器：// github上。 COM / A8M /角过滤，做这样的事情。
\r
\r\r
\r VAR对myApp = angular.module（'mcApp'，['angular.filter ]）;\r
\r
myApp.controller（'mcController'，['$范围'，函数（$范围）{\r
的console.log（'asadsds'）;\r
$ scope.myArray = [\r
{\r
名称：'什么1，\r
main_category：'B'\r
}，\r
{\r
名称：'东西2'，\r
main_category：'A'\r
}，\r
{\r
名称：东西3'\r
main_category：'A'\r
}，\r
{\r
名称：'东西4，\r
main_category：'B'\r
}，\r
{\r
名称：'东西5'，\r
main_category：'B'\r
}\r
];\r
\r
}]）; \r
＆LT; HTML LANG =ENGT＆;\r
＆LT; HEAD＆GT;\r
＆LT;间的charset =UTF-8＆GT;\r
＆LT;标题物实施例 - 例如，实施例7生产和LT; /标题＆GT;\r
\r
\r
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js\"></script>\r
＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.5/angular-filter.js\"></script>\r
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;\r
\r
\r
\r
＆LT; /头＆GT;\r
＆LT;机身NG-应用=mcAppNG控制器=mcController＆GT;\r
＆LT; P＆GT; {{名}}＆LT; / P＆GT;\r
\r
＆LT; DIV NG重复=对象myArray的|排序依据：'main_category'| GROUPBY：main_category'|的toArray：真正的＆GT;\r
＆LT; H1＆GT; {{对象$关键}}＆LT; / H1＆GT;\r
＆LT; UL＆GT;\r
＆LT;李NG重复=值对象＆GT;\r
{{value.name}}\r
＆LT; /李＆GT;\r
＆LT; / UL＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
I have array of categories that has this structure:
{
name: 'something',
main_category: 'A'
}
So each category has it's main category. I would like to display all categories in html like so:
<h1>A</h1>
<ul>
<li>list of categories that has main category A</li>
</ul>
<h1>B</h1>
<ul>
<li>list of categories that has main category B</li>
</ul>
how should I achieve it? The only way I found was doing something like this:
<h1>A</h1>
<ul>
<li ng-repeat="category in categories" ng-if="category.main_category == 'A'">..</li>
</ul>
<h1>B</h1>
<ul>
<li ng-repeat="category in categories" ng-if="category.main_category == 'B'">..</li>
</ul>
It works but I don't think it's a good idea.
解决方案
You should use groupBy filter provided by https://github.com/a8m/angular-filter, and do something like this
var myApp = angular.module('mcApp', ['angular.filter']);
myApp.controller('mcController', ['$scope', function ($scope) {
console.log('asadsds');
$scope.myArray = [
{
name: 'something 1',
main_category: 'B'
},
{
name: 'something 2',
main_category: 'A'
},
{
name: 'something 3',
main_category: 'A'
},
{
name: 'something 4',
main_category: 'B'
},
{
name: 'something 5',
main_category: 'B'
}
];
}]);
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example7-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.5/angular-filter.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="mcApp" ng-controller="mcController">
<p>{{name}}</p>
<div ng-repeat="object in myArray | orderBy: 'main_category'| groupBy:'main_category' |toArray: true" >
<h1>{{object.$key}}</h1>
<ul>
<li ng-repeat="value in object">
{{value.name}}
</li>
</ul>
</div>
</body>
</html>
这篇关于angular.js NG重复师的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
