ng重复的角度js过滤器

Question

我有两个作用域：用户和userGroups。

$scope.user = [ 
{id: 1, username: 'Vasya1', group_id: 1}, 
{id: 2, username: 'Vasya2', group_id: 1}, 
{id: 3, username: 'Vasya3', group_id: 2} 
]; 

$scope.userGroups = [ 
{id: 1, groupname: 'name1'}, 
{id: 2, groupname: 'name2'} 
]; 

users.group_id是userGroups的外键。我需要为每个组的用户范围制作过滤器。

<div ng-repeat="(gKey, g) in userGroups"> 
    <div ng-repeat="(uKey, u) in users"> 
    ... 
    </div> 
</div> 

如何添加过滤器？

Answer 1

您可以使用角过滤器和实现它。

var app = angular.module("sampleApp", []); 
 

 
app.controller("sampleController", ["$scope", 
 
    function($scope) { 
 
    $scope.users = [{ 
 
     id: 1, 
 
     username: 'Vasya1', 
 
     group_id: 1 
 
    }, { 
 
     id: 2, 
 
     username: 'Vasya2', 
 
     group_id: 1 
 
    }, { 
 
     id: 3, 
 
     username: 'Vasya3', 
 
     group_id: 2 
 
    }]; 
 

 
    $scope.userGroups = [{ 
 
     id: 1, 
 
     groupname: 'name1' 
 
    }, { 
 
     id: 2, 
 
     groupname: 'name2' 
 
    }]; 
 
    } 
 
]);

.group { 
 
    padding: 10px; 
 
} 
 
.group:nth-child(even) { 
 
    background-color: #cecece; 
 
    color: #212121; 
 
} 
 
.group:nth-child(odd) { 
 
    background-color: #989898; 
 
    color: #dedede; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
<div ng-app="sampleApp"> 
 
    <div ng-controller="sampleController"> 
 
    <div ng-repeat="group in userGroups" class="group"> 
 
     Group Name: {{group.groupname}} 
 
     <div ng-repeat="user in users | filter: { group_id: group.id}"> 
 
     User Name: {{user.username}} 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

参照angular filter。

var myApp = angular.module('myApp',[]); 
 
function MyCtrl($scope) { 
 
    $scope.selected="Not selected"; 
 
    $scope.user = [ 
 
     {id: 1, username: 'Vasya1', group_id: 1}, 
 
     {id: 2, username: 'Vasya2', group_id: 1}, 
 
     {id: 3, username: 'Vasya3', group_id: 2} 
 
    ]; 
 

 
    $scope.userGroups = [ 
 
     {id: 1, groupname: 'name1'}, 
 
     {id: 2, groupname: 'name2'} 
 
    ]; 
 
}

<div ng-app="myApp"> 
 
<div ng-controller="MyCtrl"> 
 
    <select ng-options="u.id as u.groupname for u in userGroups" ng-model="selected"></select> 
 
    <div ng-repeat="i in user | filter:{'group_id': selected}:true"> 
 
    User :{{i.username}} 
 
    </div> 
 
</div> 
 
    </div> 
 

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

希望这是帮助你

Answer 3

您可以在第二ng-repeat

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.users = [{ 
 
    id: 1, 
 
    username: 'Vasya1', 
 
    group_id: 1 
 
    }, { 
 
    id: 2, 
 
    username: 'Vasya2', 
 
    group_id: 1 
 
    }, { 
 
    id: 3, 
 
    username: 'Vasya3', 
 
    group_id: 2 
 
    }]; 
 

 
    $scope.userGroups = [{ 
 
    id: 1, 
 
    groupname: 'name1' 
 
    }, { 
 
    id: 2, 
 
    groupname: 'name2' 
 
    }]; 
 

 
    $scope.deleteGroup = function(index) { 
 
    console.log(index); 
 
    if (confirm('Are you sure?')) { 
 
     $scope.userGroups.splice(index, 1); 
 
    } 
 
    } 
 
});

.delete { 
 
    color: red; 
 
} 
 
.group { 
 
    padding: 10px; 
 
    color: grey; 
 
} 
 
.user { 
 
    color: steelblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <div ng-repeat="group in userGroups" class="group"> 
 
    Group {{group.id}} 
 
    <button class="delete" ng-click="deleteGroup($index)">delete</button> 
 
    <div ng-repeat="user in users" ng-if="user.group_id == group.id" class="user"> 
 
     {{user.id}} - {{user.username}} 
 
    </div> 
 
    </div> 
 

 
</div>

你为什么要使用