如何使用AngularJS过滤数组并使用过滤对象的属性作为ng-model属性?

Ber*_*ann 119 angularjs

如果我有一个对象数组,并且我想将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>
Run Code Online (Sandbox Code Playgroud)

控制器:

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

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

我想用等级'C'过滤主题的第二个输入,但我不想将模型绑定到等级 ; 我想将它绑定到具有等级'C'的主题的标题.

这是可能的,如果是的话,它是如何完成的?

Oli*_*ver 153

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

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

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

与普通的ES6相同:

$scope.gradeC = $scope.results.subjects.filter((subject) => subject.grade === 'C')[0]
Run Code Online (Sandbox Code Playgroud)


JB *_*zet 123

<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />
</div>
Run Code Online (Sandbox Code Playgroud)

  • 这是非常有用的,对于逆(除了C之外的所有东西),这将起作用:`filter:{grade:'!'+'C'}` (9认同)
  • 你能用“等级数组”做同样的事情吗?在我的情况下,我从树视图构建我的成绩数组,并希望过滤数组中的结果。 (2认同)

luk*_*rks 59

这是一个带有工作样本的修改后的JSBin:

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

以下是我在输入中使用过滤器所做的事情:

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


小智 12

请注意,如果你使用这样的$ filter:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});
Run Code Online (Sandbox Code Playgroud)

而你碰巧有另一个等级,哦,我不知道,CC或AC或C +或CCC将它们拉进去.你需要追加一个完全匹配的要求:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'}, true);
Run Code Online (Sandbox Code Playgroud)

当我提交一些这样的佣金细节时,这真的杀了我:

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

只是因为它拉入佣金ID而不是6来调用一个bug.

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

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

然而,我更喜欢这个(我使用typescript,因此"Let"和=>):

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

我之所以这样做是因为,在某些时候,我可能希望从过滤后的数据中获取更多信息等等......在那里有正确的功能,让引擎盖打开.


Kie*_*ran 11

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

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'});
}
Run Code Online (Sandbox Code Playgroud)

然后,您可以引用结果对象一样引用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'});
Run Code Online (Sandbox Code Playgroud)


Die*_*cio 5

如果您使用的是 ES6,您可以:

var sample = [1, 2, 3]

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

/* output */
[1, 3]
Run Code Online (Sandbox Code Playgroud)

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