陣列中的子元素AngularJS過濾器列表

我想在列表上創建一個簡單的AngularJS過濾器。然而，我想過濾的元素是數組中的一個子元素。陣列中的子元素AngularJS過濾器列表

目的：

elements = [{ 
    'claim': [{value:'foo'}], 
    class: 'class1', 
    subject: 'name1' 
}, { 
    'claim': [{value:'bar'}], 
    class: 'class1', 
    subject: 'name2' 
}, { 
    'claim': [{value:'baz'}], 
    class: 'class1', 
    subject: 'name2' 
}, { 
    'claim': [{value:'quux'}], 
    class: 'class1', 
    subject: 'name3' 
}];

HTML：

<tr class='claimrow' 
    data-ng-repeat='c in elements | filter:{claim[0].value:srcBoxFilter} | orderBy: "claim[0].value" '>

通過手柄的順序的語法「如權利要求[0]。價值」，但所述過濾器沒有。

這將生成一個錯誤：

Error: Syntax Error: Token '[' is unexpected, expecting [:] 
at column 25 of the expression 
[elements | filter:{claim[0].value:srcBoxFilter} | orderBy: "claim[0].value"] 
starting at [[0].value:srcBoxFilter} | orderBy: "claim[0].value"].

來源

2014-07-12 ed4becky

可能重複[嵌套過濾與Angular.js版本1.2.18] （http://stackoverflow.com/questions/24266784/nested-filtering-with-angular-js-version-1-2-18） – Blackhole

這是不同的，因爲數組的介紹。我試過filter：{claim：[{value：srcBoxFilter}]}但這似乎不起作用（雖然錯誤消失） – ed4becky

有趣的問題。特別是因爲嵌套數組值適用於排序而不是過濾。我和你的JSFiddle玩過一次，並且沒有任何東西可以工作。你可以通過編寫你自己的過濾器來輕鬆解決這個問題。

我已經updated your JSFiddle顯示如何做到這一點。只是我對你的代碼所做的更改如下所示：

的JavaScript

myApp.filter('byFirstClaimValue', function() { 
    return function (items, filterText) { 
     if(!filterText) 
      return items; 

     var out = []; 
     for (var i = 0; i < items.length; i++) { 
      if (items[i].claim[0].value.toLowerCase().indexOf(filterText.toLowerCase()) > -1) { 
       out.push(items[i]); 
      } 
     } 
     return out; 
    } 
});

HTML

<tr class="claimrow" data-ng-repeat="c in elements | byFirstClaimValue:srcBoxFilter | orderBy: 'claim[0].value'">

的

來源

2014-07-12 14:47:24

我知道創建我自己是一種選擇，但認爲應該有一個'開箱'解決方案。或者至少是一個內聯函數解決方案 – ed4becky

是的，它似乎是你應該已經工作，因爲該命令的作品... +1你的問題:) –

陣列中的子元素AngularJS過濾器列表

回答

相關問題