如何使用AngularJS过滤数组,并使用过滤对象的属性作为ng模型属性?

如何使用AngularJS过滤数组,并使用过滤对象的属性作为ng模型属性?,angularjs,Angularjs,如果我有一个对象数组,并且我想基于过滤器将角度模型绑定到其中一个元素的属性,我该怎么做?我可以用一个具体的例子更好地解释: HTML: JSBin: 我想过滤第二个输入到等级为“C”的主题,但我不想将模型绑定到等级;我想把它和C级科目的题目联系起来 这可能吗?如果可能,是如何做到的? <div ng-repeat="subject in results.subjects | filter:{grade:'C'}"> <input ng-model="subject.ti

如果我有一个对象数组,并且我想基于过滤器将角度模型绑定到其中一个元素的属性,我该怎么做?我可以用一个具体的例子更好地解释:

HTML:

JSBin:

我想过滤第二个输入到等级为“C”的主题,但我不想将模型绑定到等级;我想把它和C级科目的题目联系起来

这可能吗?如果可能,是如何做到的?


<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />
</div>
您可以使用控制器中的“过滤器”过滤器获得所有“C”等级。获取结果数组的第一个元素将为您提供等级为“C”的主题的标题

与普通ES6相同:

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

下面是一个经过修改的JSBin,带有一个工作示例:

以下是我对输入中的过滤器所做的操作:

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

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

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'});
}
然后,您可以引用失败的主题,方法与引用结果对象相同

你可以在这里了解更多

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

// update 
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey);
// becomes
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});
您还可以将函数与
$filter('filter')
一起使用:

var foo=$filter('filter')($scope.results.subjects,函数(项){
退货项目.等级!='A';
});

请注意,如果您像这样使用$filter:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});
var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}))[0];
你碰巧有另一个等级,哦,我不知道,是CC、AC、C+还是CCC,它把他们拉进去了。您需要附加一个精确匹配的要求:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'}, true);
这真的让我很难受,当我把一些佣金细节弄进来的时候,像这样:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});
var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}))[0];
只会因为一个bug而被叫进来,因为它是在拉委员会ID 56而不是6

添加真值将强制进行精确匹配

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}, true))[0];
然而,我还是喜欢这样(我使用typescript,因此使用“Let”和=>):


我这样做是因为,在未来的某个时刻,我可能想从过滤后的数据中获得更多的信息,等等。。。将函数放在那里会让引擎罩打开。

在HTML中应用相同的过滤器,并有多个列,例如:

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

如果您正在使用ES6,您可以:

var sample = [1, 2, 3]

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

/* output */
[1, 3]

另外,请注意过滤器不会更新现有阵列,它每次都会返回一个新的过滤阵列。

我知道你要做什么,但我真的不想要中继器。我实际上要过滤的属性是一个标识列,因此它是唯一的。但是我发现这是解决一般问题的正确方法。这是一个意大利人的教程:)这非常有用,对于逆(C以外的所有东西),这将起作用:
filter:{grade:'!'+'C'}
你能对
grade数组做同样的事情吗?在我的例子中,我从一个树状视图构建我的等级数组,并希望过滤数组中的等级。这才是真正的交易。这就是力量。就是这样。我同意了,现在我很高兴。什么是过滤器?是服务还是指令?filterFilter的代码在哪里?它是一种角度服务。看看上面链接中的第一个示例。(在scripts.js文件中)虽然他们更改了文档过滤器仍然有效。很抱歉,我没有使用第二个过滤器(“过滤器”),您能再解释一下吗?@stevek这是过滤器的名称。filter()方法为您提供过滤器。过滤器之所以称为过滤器,是因为它过滤数组。货币过滤器是这样的:$filter('currency')(amount,symbol,fractionSize)检查这里的文档:我和你一样有同样的错误,感谢第三个布尔参数的提示。我不知道。
 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)
var sample = [1, 2, 3]

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

/* output */
[1, 3]