ng-options and unique filter not displaying angular.js

Question

In my javascript I have an array

$scope.quoteList =        
    [
        {
            select: false,
            laymansDescription: "Nathan",
            quoteNumber: "ING-70440-21",
            version: "02",
            quoteDate: "Feb 5,2013",
            expirationDate: "Aug 5,2013",
            internalNotes: "This quote is using test data",
        },
        {
            select: false,
            laymansDescription: "Mitch",
            quoteNumber: "ING-70440-01",
            version: "02",
            quoteDate: "Feb 5,2013",
            expirationDate: "Aug 5,2013",
            internalNotes: "This quote is using test data",
        },
        {
            select: false,
            laymansDescription: "Stephen",
            quoteNumber: "ING-70440-01",
            version: "02",
            quoteDate: "Feb 5,2013",
            expirationDate: "Aug 5,2013",
            internalNotes: "This quote is using test data",
        }
    ];

And I am trying to make a selector that will only show unique quoteNumbers ie. ING-70440-21 and ING-70440-01. However when I try to use the 'unique' option in angular, nothing is showing up.

<select class="form-control" ng-options="quote.quoteNumber for quote in quoteList | unique:'quoteNumber'" ng-model="quoteModel1" />

It works fine without the unique tag. What am I doing wrong? I pretty new to angular so it might be something really simple.

Answer 1

AngularJS does not have a built-in unique filter. You can do something like this to make one of your own:

app.filter('unique', function() {
    return function(input, key) {
        var unique = {};
        var uniqueList = [];
        for(var i = 0; i < input.length; i++){
            if(typeof unique[input[i][key]] == "undefined"){
                unique[input[i][key]] = "";
                uniqueList.push(input[i]);
            }
        }
        return uniqueList;
    };
});

Answer 2

You should check angular-filter module and use the uniqFilter

EXAMPLE:

JS:

function MainController ($scope) {
  $scope.orders = [
    { id:1, customer: { name: 'John',    id: 10 } },
    { id:2, customer: { name: 'William', id: 20 } },
    { id:3, customer: { name: 'John',    id: 10 } },
    { id:4, customer: { name: 'William', id: 20 } },
    { id:5, customer: { name: 'Clive',   id: 30 } }
  ];
}

HTML:

<th>Customer list:</th>
<tr ng-repeat="order in orders | unique: 'customer.id'" >
   <td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>

<!-- result:
All customers list:
John 10
William 20
Clive 30

Answer 3

From angular UI

app.filter('unique', function () {

  return function (items, filterOn) {

    if (filterOn === false) {
      return items;
    }

    if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
      var hashCheck = {}, newItems = [];

      var extractValueToCompare = function (item) {
        if (angular.isObject(item) && angular.isString(filterOn)) {
          return item[filterOn];
        } else {
          return item;
        }
      };

      angular.forEach(items, function (item) {
        var valueToCheck, isDuplicate = false;

        for (var i = 0; i < newItems.length; i++) {
          if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
            isDuplicate = true;
            break;
          }
        }
        if (!isDuplicate) {
          newItems.push(item);
        }

      });
      items = newItems;
    }
    return items;
  };
});