CODEWITHSUNDEEP
angularjs
hohn doe
hohn doe

Reputation: 3

Angular js filter for ng repeat

I have two scopes: users and 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 is foreign key for userGroups. I need to make filter for users scope for each group.

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

How can i add filter?

Upvotes: 0

Views: 72

Answers (3)

Weedoze
Weedoze

Reputation: 13953

You can use ng-if on the second 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>

Upvotes: 0

NIKHIL RANE
NIKHIL RANE

Reputation: 4092

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

Hope this is help you

Upvotes: 0

Sreekanth
Sreekanth

Reputation: 3130

You could use the angular filters and achieve it.

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>

Upvotes: 1

Related Questions