AngularJS - 將ng-repeat分成不同的過濾器或組

我有一個列表，我想將它分組到頁面上的不同部分。AngularJS - 將ng-repeat分成不同的過濾器或組

我現在有它分成像這樣（代碼縮短爲更易於閱讀）：

<div ng-repeat="role in roles | filter: { Type: 'AA'}"> 
    <input class="styled" type="checkbox" value="{{ role.Value }}" /> 
    <label>{{ role.Name }}</label> 
</div> 
<div ng-repeat="role in roles | filter: { Type: 'BB'}"> 
    <input class="styled" type="checkbox" value="{{ role.Value }}" /> 
    <label>{{ role.Name }}</label> 
</div> 
<div ng-repeat="role in roles | filter: { Type: 'CC'}"> 
    <input class="styled" type="checkbox" value="{{ role.Value }}" /> 
    <label>{{ role.Name }}</label> 
</div> 
<div ng-repeat="role in roles | filter: { Type: 'DD'}"> 
    <input class="styled" type="checkbox" value="{{ role.Value }}" /> 
    <label>{{ role.Name }}</label> 
</div> 
<div ng-repeat="role in roles | filter: { Type: 'EE'}"> 
    <input class="styled" type="checkbox" value="{{ role.Value }}" /> 
    <label>{{ role.Name }}</label> 
</div> 
...

我覺得這個列表循環爲每個組，這似乎並不高效。

我很好奇，如果有更好的方法來做到這一點？例如，在頂部只有一個ng-repeat並在子部分內進行篩選。

來源

2016-02-12 John Lee

這應該做的伎倆，如果我理解正確。

angular.module("roleApp", []) 
 
    .controller('myCtrl', myCtrl); 
 

 
function myCtrl($scope) { 
 
    $scope.people = [{ 
 
    name: 'Penelope', 
 
    role: 'AA' 
 
    }, { 
 
    name: 'Franklin', 
 
    role: 'BB' 
 
    }, { 
 
    name: 'Stewart', 
 
    role: 'CC' 
 
    }, { 
 
    name: 'Keith', 
 
    role: 'DD' 
 
    }, { 
 
    name: 'Paula', 
 
    role: 'EE' 
 
    }, { 
 
    name: 'Maria', 
 
    role: 'BB' 
 
    }, { 
 
    name: 'Claudette', 
 
    role: 'EE' 
 
    }]; 
 

 

 
    var indexedRoles = []; 
 

 
    $scope.rolesToFilter = function() { 
 
    indexedRoles = []; 
 
    return $scope.people; 
 
    }; 
 

 
    $scope.filterRoles = function(person) { 
 
    var roleIsNew = indexedRoles.indexOf(person.role) == -1; 
 
    if (roleIsNew) { 
 
     indexedRoles.push(person.role); 
 
    } 
 
    return roleIsNew; 
 
    } 
 
}

h1 { 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    padding: 0; 
 
} 
 
h2 { 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
p { 
 
    font-size: 12px; 
 
    margin-left: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div ng-app="roleApp" ng-controller="myCtrl"> 
 
    <h1>ROLES:</h1> 
 
    <div ng-repeat="personPerRole in rolesToFilter() | filter:filterRoles"> 
 
    <h2>{{personPerRole.role}} :</h2> 
 
    <p ng-repeat="person in people | filter:{role: personPerRole.role}">{{person.name}}</p> 
 
    </div> 
 
</div>

來源

2016-02-12 22:08:35 MaxRocket

太棒了！我能夠拿出你的榜樣，併爲我所需要的擴展它。我忘了我們可以製作這樣的自定義過濾器。謝謝！ –

太棒了。很高興我能幫上忙。乾杯。 – MaxRocket

我可以看到一種方法，通過採用TypeFileter數組，它將具有所有的過濾器值。

標記

<div ng-repeat="role in roles | filter: { Type: TypeFileter[$index]}"> 
    <input class="styled" type="checkbox" value="{{ role.Value }}" /> 
    <label>{{ role.Name }}</label> 
</div>

代碼

$scope.TypeFileter = ['AA', 'BB', 'CC', 'DD', 'EE', /*... so on */]

來源

2016-02-12 21:14:42

我能夠拿你和MaxRocket的例子創建我的自定義fitler。謝謝！ –

AngularJS - 將ng-repeat分成不同的過濾器或組

回答

相關問題