簡體   English   中英

ng-repeat中的angularjs自定義過濾器

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM