Question

在我的javascript中我有一个数组

$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",
        }
    ];

我正在尝试制作一个只显示唯一quoteNumbers的选择器，即。 ING-70440-21和ING-70440-01。但是当我尝试在角度中使用'unique'选项时，没有任何东西出现。

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

没有唯一标记，它可以正常工作。我究竟做错了什么？我对角度很新，所以它可能非常简单。

Answer 1

AngularJS没有内置的unique过滤器。你可以做这样的事情来做自己的事情：

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

您应该检查angular-filter模块并使用uniqFilter

示例：

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

来自角度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;
  };
});

ng-options和不显示angular.js的唯一过滤器

3 个答案: