如果我有一个对象数组,并且我想将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)
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)
如果您使用的是 ES6,您可以:
var sample = [1, 2, 3]
var result = sample.filter(elem => elem !== 2)
/* output */
[1, 3]
Run Code Online (Sandbox Code Playgroud)
还要注意 filter 不会更新现有数组,它每次都会返回一个新的过滤数组。
| 归档时间: |
|
| 查看次数: |
269054 次 |
| 最近记录: |