Anuglar js过滤深度对象
Anuglar js过滤深度对象
提问于 2018-06-01 18:00:52
我陷入了一种必须使用filter in ng-repeat查找数据的情况
情况：
Data是对象的数组，名称为，状态为，状态具有a属性
现在，我想过滤具有属性状态的对象。a as started and in progress
我尝试过多种解决方案
Sol1：
ng-repeat="item in items | filter: {status :{a:'Not Started'},status: {a:'In Progress'}}仅返回正在进行中的的结果：状态.a
Sol2：
<p ng-repeat="item in items | filter: {status :{a:'Not Started' , a:'In Progress'}}">
{{ item.name }}
</p>返回相同的结果：status.a of In Progress only
html
<div ng-controller="mainCtrl">
<h1>List 1</h1>
<ul>
<li class="clearfix">
<label>
<input ng-model="tracks.ns"
ng-true-value="'Not Started'"
ng-false-value="''"
type="checkbox">
Not started
</label>
</li>
<li class="clearfix">
<label> <input ng-model="tracks.ip" ng-true-value="'In Progress'" ng-false-value="''" type="checkbox">In-progress </label>
</li>
<li class="clearfix">
<label> <input ng-model="tracks.do" ng-true-value="'Done'" ng-false-value="''" type="checkbox">Done </label>
</li>
</ul>
{{tracks.ns}}
<p ng-repeat="item in filteredItems">{{ item.name }}</p>
<h1>List 2</h1>
<p ng-repeat="item in items | filter: {status :{a:'Not Started' , a:'In Progress'}}">{{ item.name }}</p>
</div>js
$scope.items = [{
name: "Alvi",
status: {
a: 'Not Started'
}
}, {
name: "Krane",
status: {
a: 'Done'
}
}, {
name: "Tate",
status: {
a: 'In Progress'
}
}, {
name: "Lorus",
status: {
a: 'In Progress'
}
}];
$scope.tracks = {ns: '',ip: '',done : ''}问题：
- 没有自定义筛选器我能达到预期效果吗？
- 如果可以，比没有自定义筛选器如何？
回答 1
Stack Overflow用户
发布于 2018-06-01 21:44:53
在过滤器表达式中使用函数：
<p ng-repeat="item in items | filter : customFn">
{{ item.name }} {{ item.status }}
</p>JS
$scope.customFn = function(value, index, array) {
console.log(value, index, array);
if (!value) return true;
if (value.status.a == 'Not Started') return true;
if (value.status.a == 'In Progress') return true;
//else
return false;
} 有关更多信息，请参阅AngularJS Filter Component Reference - filter
The DEMO on PLNKR
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50648814
复制相关文章
![[Office] 段落间距调整](https://ask.qcloudimg.com/http-save/yehe-4998871/ddr1nazeh3.png)
相似问题
我如何使用Vuetify间距助手？
Vuetify图标大小
更改vuetify的字体大小
关于更改游乐场纹理的大小
itemselector -列的间距大小
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
