AngularJS自定义过滤器在ng-repeat
angularjs custom filter in ng-repeat
我正在尝试通过自定义过滤器从 JSON 响应返回唯一值。
数据:
[
{
"SHFUserID": "400",
"AlertID": "12",
"TickerID": "4512",
"Ticker": "GOOG",
"Active": "1",
"Status": "2"
},
{
"SHFUserID": "400",
"AlertID": null,
"TickerID": "4512",
"Ticker": "GOOG",
"Active": null,
"Status": null
},
{
"SHFUserID": "400",
"AlertID": null,
"TickerID": "10190",
"Ticker": "IBM",
"Active": null,
"Status": null
}
]
滤波器:
.filter('uniqueTickers', function() {
return function(tickers) {
var tags = {};
angular.forEach(tickers, function(obj) {
if(!(obj.Ticker in tags)){
tags[obj.Ticker] = {id: obj.TickerID, name:obj.Ticker}
if(!tags[obj.Ticker].pending){
tags[obj.Ticker].pending = 0;
}
if(!tags[obj.Ticker].settled){
tags[obj.Ticker].settled = 0;
}
if(!tags[obj.Ticker].order){
tags[obj.Ticker].order = 3;
}
}
if(obj.Status === "1"){
tags[obj.Ticker].pending = 1;
if(tags[obj.Ticker].order > 2){
tags[obj.Ticker].order = 2;
}
}
if(obj.Status === "2"){
tags[obj.Ticker].settled = 1;
if(tags[obj.Ticker].order > 1){
tags[obj.Ticker].order = 1;
}
};
});
return tags;
};
.html:
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="order">Alert Status</option>
</select>
<ul class="tickerList">
<li ng-repeat="ticker in tickers | filter:query | orderBy:orderProp | uniqueTickers">
<a href="#/ticker/{{ticker.id}}">{{ticker.name}}</a>
<p>{{ticker}}</p>
</li>
</ul>
但结果看起来像:
GOOG
{"id":"4512","name":"GOOG","pending":0,"settled":0,"order":3}
IBM
{"id":"10190","name":"IBM","pending":0,"settled":0,"order":3}
而不是:
GOOG
{"id":"4512","name":"GOOG","pending":0,"settled":1,"order":1}
IBM
{"id":"10190","name":"IBM","pending":0,"settled":0,"order":3}
目标是保持结果集唯一,但如果该代码的任何记录处于挂起或已结算状态,则将"挂起"或"已结算"设置为 true。
经过一番讨论,答案是通过在逻辑的第一部分周围添加检查来避免过度使用现有数据,如下所示:
if(!(obj.Ticker in tags)){
tags[obj.Ticker] = {id: obj.TickerID, name:obj.Ticker};
if(!tags[obj.Ticker].pending){
tags[obj.Ticker].pending = 0;
}
if(!tags[obj.Ticker].settled){
tags[obj.Ticker].settled = 0;
}
if(!tags[obj.Ticker].order){
tags[obj.Ticker].order = 3;
}
}
相关文章:
- ng repeat在ng repeat-过滤器不工作
- 如何仅在文本字段中有值时才将自定义过滤器应用于 ng-repeat
- 应用像ng-repeat这样的过滤器,但没有ng-repeat
- ng-repeat中的Angular Js对象过滤器
- Angularjs ng-repeat过滤器在v1.0.1中工作,而不是v1.3.7
- 如何在 ng-repeat 过滤器中传递 HoDjango views.py 上下文数据变量
- 如何在数组上使用 ng-repeat 和过滤器属性
- AngularJS - 将ng-repeat划分为不同的过滤器或组
- 如何在 ng-repeat中更新过滤器功能
- AngularJS嵌套ng-repeat过滤器多个参数
- AngularJS:我可以使用过滤器在ng-repeat中对数组进行分块吗?
- AngularJS,ng-repeat+过滤器从控制器调用
- AngularJS对未格式化日期表达式的ng-repeat过滤器
- AngularJS的ng-repeat过滤器基于select选项
- React JS中的ng-repeat过滤器选项
- AngularJS的ng-repeat过滤器通过特定的ID从JSON
- 调整ng-repeat过滤器的大小
- JPA ng-repeat过滤器-多个id'
- AngularJS ng-repeat过滤器特定的嵌套属性
- Angular JS - 基于使用相同ng模型的多个对象属性的ng-repeat过滤器对象数组