[英]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}
目的是保持結果集唯一,但如果該行情記錄的任何記錄處於待處理或結算狀態,則將“ pending”或“ settled”設置為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;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.