javascript - angular.js ng-重复除法

标签 javascript angularjs

我有一组具有这种结构的类别:

{
name: 'something',
main_category: 'A'
}

所以每个类别都有它的主要类别。我想像这样在 html 中显示所有类别:

<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>

我该如何实现?我发现的唯一方法是做这样的事情:

<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>

它有效,但我认为这不是个好主意。

最佳答案

您应该使用 https://github.com/a8m/angular-filter 提供的 groupBy 过滤器,然后做这样的事情

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>

关于javascript - angular.js ng-重复除法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32026558/

相关文章:

javascript - 更新状态时,map 不是函数

javascript - Controller $scope 属性不更新(套接字连接)

angularjs - 无法读取未定义gulp的属性 'apply'

javascript - 我如何调用另一个 Controller 中的函数(Angularjs)

javascript - 有什么办法可以浏览列表吗? ionic 框架

javascript - 如何使用 SAML 将 AWS Cognito 连接到远程 Shibboleth 安装?

javascript - 查找 d3 中多个数据维度的范围

javascript - 检查 typeof a === "undefined"而不是 a === undefined 有什么好处吗?

javascript - 如何处理 DjangoCMS i18n URL (/en/my_page,/fr/my_page...) 和 AngularJS?

javascript - 我的帖子请求在 $q.all 执行之前得到解决