angular.js NG-重複司

我有了這種結構類型的數組：angular.js NG-重複司

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

它的工作原理，但我不認爲這是一個好主意。

來源

2015-08-15 dontHaveName

您應該使用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>

來源

2015-08-15 16:48:29

See this answer如何使用角度的filter: { prop: 'value' }語法來實現相同的功能在這個用例的ng-if：

<h1>A</h1> 
<ul> 
    <li ng-repeat="category in categories | filter: {main_category: 'A'}"></li> 
</ul> 

<h1>B</h1> 
<ul> 
    <li ng-repeat="category in categories | filter: {main_category: 'B'}"></li> 
</ul>

來源

2015-08-15 16:07:19 sdgluck

您可以通過創建第二個主類別數組來完成。使用ng-repeat-start和ng-repeat-end創建基本結構（h1 + ul）。在ul中，由主類別過濾的類別的第二個轉發器呈現列表項目（fiddle）：

<div ng-app ng-controller="MyCtrl"> 
    <h1 ng-repeat-start="mainCategory in mainCategories | orderBy">{{mainCategory}}</h1> 
    <!-- main categories ngRepeat starts here --> 
    <ul ng-repeat-end> 
     <!-- main categories ngRepeat ends here --> 
     <li ng-repeat="category in categories | orderBy:'name' | filter:{ 'main_category': mainCategory}">{{category.name}}</li> 
     <!-- categories are filtered by mainCategory --> 
    </ul> 
</div> 


function MyCtrl($scope) { 
    var categories = [{ 
     name: 'somethingA2', 
     main_category: 'A' 
    }, { 
     name: 'somethingB1', 
     main_category: 'B' 
    }, { 
     name: 'somethingB2', 
     main_category: 'B' 
    }, { 
     name: 'somethingA3', 
     main_category: 'A' 
    }, { 
     name: 'somethingB3', 
     main_category: 'B' 
    }, { 
     name: 'somethingA1', 
     main_category: 'A' 
    }]; 

    $scope.categories = categories; 

    /** main categories - reduce the categories array to a dictionary object, and get the keys of the dictionary to get the unique main category names **/ 
    $scope.mainCategories = Object.keys(categories.reduce(function (main, category) { 
     main[category['main_category']] = ''; 
     return main; 
    }, {})); 
}

來源

2015-08-15 17:00:34

angular.js NG-重複司

回答

相關問題