Angular js, Unique filter is not working

Question

I'm trying to apply a check box filter to a list, but the options for the check boxes should also be come the list of items only, it works fine if i am iterating it for all the check boxes, the problem is coming when i am trying to apply the unique filter to display check boxes options. i have included angular 1.4 and ui-utils

<script src="js/angular.min.js"></script>
<script src="js/ui-utils.min.js"></script>

my view and controller are defined as:

<div ng-controller="Test">
    <div ng-repeat="person in persons | unique:type">
      <!-- record that this person has been selected -->
      <input type="checkbox" ng-checked="person.checked" ng-model="person.checked" /> {{ person.type }}
    </div>
  <ul>
    <li ng-repeat="person in persons | selectedTypes">{{person.name}}</li>
  </ul>
</div>

and script is

<script>
    var app = angular.module("MyApp", ['ui.utils']);
    app.controller("Test", function($scope) {
      $scope.persons = [
        { type: 1,   name: 'Ankit Balyan' },
        { type: 1,   name: 'Abhilaksh' },
        { type: 2,   name: 'Sanket Srivastav' },
        { type: 2,   name: 'Sachin Sharma' },
        { type: 2,   name: 'Rohan Rathor' },
        { type: 2,   name: 'Jim' },
      ];

        $scope.$watch('persons', function() {
            console.log($scope.persons);
        })
    });

// Define our filter
app.filter('selectedTypes', function($filter) {
  return function(persons) {
    var i, len;

    // get persons that have been checked
    var checkedPersons = $filter('filter')(persons, {checked: true});
    // Add in a check to see if any persons were selected. If none, return 
    // them all without filters
    if(checkedPersons.length == 0) {
      return persons;
    }
    //console.log(checkedPersons);
    // get all the unique cities that come from these checked persons
    var types = {};
    for(i = 0, len = checkedPersons.length; i < len; ++i) {
      // if this checked persons cities isn't already in the cities object 
      // add it
      if(!types.hasOwnProperty(checkedPersons[i].type)) {
        types[checkedPersons[i].type] = true;
      }
    }
    // Now that we have the cities that come from the checked persons, we can
    //get all persons from those cities and return them
    var ret = [];
    for(i = 0, len = persons.length; i < len; ++i) {
      // If this person's city exists in the cities object, add it to the 
      // return array
      if(types[persons[i].type]) {
        ret.push(persons[i]);
      } 
    }
    //console.log(persons.length);
    // we have our result!
    return ret;
  };
});
</script>

Michel · Accepted Answer · 2015-03-23 20:07:34Z

1

You have to put the name of the property as a string :

<div ng-repeat="person in persons | unique: 'type'">

instead of

<div ng-repeat="person in persons | unique: type">

Edit: If you don't provide quotes, you are applying a unique filter by the value of the variable type, which is not defined in your case, therefore the filter has no effect.

edited Mar 23, 2015 at 20:07

answered Mar 23, 2015 at 15:46

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ankit Balyan Over a year ago

yes it works, but many of the places i have seen filters are provided without any quotes, what's the difference here.

Michel Over a year ago

@SfAnki, you can provide a filter without quotes, but then you are filtering by the value of the filter argument. So if in your scope you have a variable type with the value 'type', that will also work. I will complete the answer so as to precise that.

Collectives™ on Stack Overflow

Angular js, Unique filter is not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related