如何使用 AngularJS 过滤数组并将过滤对象的属性用作 ng-model 属性？答案

【问题标题】：How do I filter an array with AngularJS and use a property of the filtered object as the ng-model attribute?如何使用 AngularJS 过滤数组并将过滤对象的属性用作 ng-model 属性？
【发布时间】：2013-07-30 11:30:38
【问题描述】：

如果我有一个对象数组，并且我想将 Angular 模型绑定到基于过滤器的元素之一的属性，我该怎么做？我可以用一个具体的例子更好地解释：

HTML：

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>
    <body ng-controller="MyCtrl">
        <input ng-model="results.year">
        <input ng-model="results.subjects.title | filter:{grade:'C'}">
    </body>
</html>

控制器：

function MyCtrl($scope) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
}

JSBin：http://jsbin.com/adisax/1/edit

我想过滤第二个输入到具有等级'C'的主题，但我不想将模型绑定到等级；我想将它绑定到'C'级的主题的title。

这可能吗？如果可以，是如何做到的？

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以使用控制器中的“过滤器”过滤器来获得所有“C”等级。获取结果数组的第一个元素将为您提供等级为“C”的主题的标题。

$scope.gradeC = $filter('filter')($scope.results.subjects, {grade: 'C'})[0];

http://jsbin.com/ewitun/1/edit

与普通 ES6 相同：

$scope.gradeC = $scope.results.subjects.filter((subject) => subject.grade === 'C')[0]

【讨论】：

很抱歉，我没有关注第二个过滤器（“过滤器”），您能再解释一下吗？
@stevek 这是过滤器的名称。 filter() 方法为您提供过滤器。只是过滤器被称为过滤器，因为它过滤了一个数组。使用货币过滤器看起来像这样： $filter('currency')(amount, symbol, fractionSize) 在此处查看文档：docs.angularjs.org/api/ng/filter

【解决方案2】：

<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />
</div>

【讨论】：

我明白你的意思，但我真的不想要中继器。我实际过滤的属性是一个标识列，所以它是唯一的。但我认为这将是解决一般问题的正确方法。
这是给意大利人的教程 :) dev.stasbranger.com/post/77190983049/…
这很有帮助，对于逆（C 以外的所有内容），这将起作用：filter:{grade:'!'+'C'}
你能用grade array做同样的事情吗？在我的情况下，我从树视图构建我的成绩数组，并希望过滤数组中的结果。

【解决方案3】：

这是一个经过修改的 JSBin，带有一个工作示例：

http://jsbin.com/sezamuja/1/edit

这是我对输入中的过滤器所做的：

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">

【讨论】：

这是真正的交易。这就是力量。这就是方法。我同意了，现在我很高兴。

【解决方案4】：

请注意，如果您像这样使用 $filter：

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

而你碰巧有另一个等级，哦，我不知道，CC 或 AC 或 C+ 或 CCC 它把他们拉到了。您需要附加一个完全匹配的要求：

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'}, true);

当我提取一些这样的佣金细节时，这真的让我很生气：

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}))[0];

只因错误而被调用，因为它正在提取佣金 ID 56 而不是 6。

添加真正的力量完全匹配。

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}, true))[0];

不过，我还是更喜欢这个（我使用打字稿，因此使用了“Let”和 =>）：

let obj = this.$filter('filter')(this.CommissionTypes, (item) =>{ 
             return item.commission_type_id === 6;
           })[0];

我这样做是因为，在未来的某个时候，我可能想从过滤后的数据中获取更多信息，等等……将功能放在那里有点让引擎盖打开。

【讨论】：

我遇到了和你一样的错误，感谢第三个布尔参数的提示。不知道。

【解决方案5】：

如果您想在控制器中创建单独的结果列表，您可以应用过滤器

function MyCtrl($scope, filterFilter) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
  //create a filtered array of results 
  //with grade 'C' or subjects that have been failed
  $scope.failedSubjects = filterFilter($scope.results.subjects, {'grade':'C'});
}

然后您可以像引用 results 对象一样引用 failedSubjects 对象

您可以在此处阅读有关它的更多信息 https://docs.angularjs.org/guide/filter

由于这个答案角已经更新了他们现在建议调用过滤器的文档

// update 
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey);
// becomes
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

【讨论】：

什么是 filterFilter ？它是任何服务或指令吗？ filterFilter的代码在哪里？
这是一个角度服务。查看上面链接中的第一个示例。（在 scripts.js 文件中）
虽然他们更改了文档 filterFilter 仍然有效..

【解决方案6】：

如果你使用的是 ES6，你可以：

var sample = [1, 2, 3]

var result = sample.filter(elem => elem !== 2)

/* output */
[1, 3]

还要注意过滤器不会更新现有数组，它每次都会返回一个新的过滤数组。

【讨论】：

【解决方案7】：

您也可以将函数与$filter('filter')一起使用：

var foo = $filter('filter')($scope.results.subjects, function (item) {
  return item.grade !== 'A';
});

【讨论】：

【解决方案8】：

在具有多列的 HTML 中应用相同的过滤器，只是示例：

 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)

【讨论】：