129

如果我有一个对象数组，并且我想将 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”级的主题的标题。

这是可能的，如果是这样，它是如何完成的？

4

8 回答 8

161

您可以使用控制器中的“过滤器”过滤器来获得所有“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]
于 2013-07-30T13:00:16.957 回答
134 
<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />
</div>
于 2013-07-30T11:50:50.507 回答
63

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

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

这是我在输入中使用过滤器所做的：

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">
于 2014-04-30T11:49:23.313 回答
16

请注意，如果您像这样使用 $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];

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

于 2017-03-23T20:12:29.000 回答
13

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

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'});
}

然后您可以像引用结果对象一样引用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'});
于 2014-11-19T00:27:07.647 回答
6

如果你使用 ES6，你可以：

var sample = [1, 2, 3]

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

/* output */
[1, 3]

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

于 2018-04-03T21:30:04.787 回答
4

您还可以使用以下功能$filter('filter')： 

var foo = $filter('filter')($scope.results.subjects, function (item) {
  return item.grade !== 'A';
});
于 2017-02-03T21:50:56.267 回答
0

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

 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)
于 2018-01-11T09:52:04.963 回答