3

在我的 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。但是，当我尝试在 Angular 中使用“唯一”选项时，什么都没有出现。

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

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

4

3 回答 3

19

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;
    };
});
于 2013-08-22T14:01:39.013 回答
4

您应该检查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
于 2014-06-30T13:18:13.790 回答
1

从角度 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;
  };
});
于 2017-01-18T06:51:49.360 回答