Angular js过滤ng重复

Question

我有两个范围：users和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

您可以使用角度滤镜来实现它。

＆＃13;

＆＃13;

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'
    }];
  }
]);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

参考angular filter。

＆＃13;

＆＃13;

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'}
  ];
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这对你有帮助

Answer 3

您可以在第二个ng-if

上使用ng-repeat

＆＃13;

＆＃13;

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);
    }
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;