使用AngularJS過濾JSON數據

我將JSON對象綁定到列表，但我只想爲每個用戶顯示一個（第一個，因爲結果是有序的）項目。我回來的JSON是每個項目，用戶對象作爲一個屬性（item.user.username等）。有了jQuery，我會做類似的：使用AngularJS過濾JSON數據

var arr = ... JSON objects ... 
var seen_users = []; 
var items = []; 
$.each(arr, function(i, item){ 
    if (!$.inArray(item.user.id, arr) === -1){ 
     items.push(item); 
     seen_users.push(item.user.id); 
    } 
}

但是有沒有更多的Angular-thonic方法來做到這一點？我一直在尋找過濾器，但不能找出一個簡單的方法（除了迭代上面的綁定數據）來做到這一點。

UPDATE：

AngularJS代碼是一個有點多後，但基本上我在我的控制器JSON對象，我通過的$ HTTP的API禮貌和ItemFactory獲得的$ scope.items陣列，並非常基本的HTML來顯示的東西：

<ul id="items"> 
    <li class="item" data-ng-repeat="item in items"> 
     {{item.title}} | {{item.posted}} 
    </li> 
</ul>

來源

2013-12-11 Jough Dempsey

我可以看到你的角碼嗎？也將顯示這個HTML？ – Fresheyeball

理想情況下把代碼放入jsfiddle.net或帶有示例數據的plunker中......雖然 – charlietfl

在你的HTML你可以索引你的陣列是這樣的： 更新：

<ul> 
    <li> 
     {{item[0].title}} | {{item[0].posted}} 
    </li> 
</ul>

，你的腳本應該是這樣的：

$scope.items = []; // with your data in it.

還有幾個其他的方式來做到這一點。如果你希望它是動態的（例如，如果你想在以後按需要顯示更多的項目：

<span data-ng-repeat="item in displayItems"> 
{{item.user.id}} 
</span>

該腳本會像：

$scope.items = []; // this is your original array with all the data in it. 
$scope.displayItems = []; // this is an empty array that a function will fill up with  data 
myFunction = function(){ 
    // put data selection logic here 
    $scope.displayItems.push($scope.items[i]); 
};

來源

2013-12-11 22:03:37 zfor

這裏基本上就是我現在用上面發佈的jQuery所做的 - 只是希望這是一個解決的角度問題，不需要我遍歷整個數組，因爲angularjs使它很容易消耗JSON數據。 –

然後你可以在你的html中索引這個數組，就像我上面發佈的那樣。 {{項目[0] .something}}將工作得很好。 – zfor

您可以創建這樣的自定義過濾器

app.filter('myFilter', [function() { 
    return function (arr) { 
     var seen_users = []; 
     var items = []; 
     $.each(arr, function (i, item) { 
      if (!$.inArray(item.user.id, arr) === -1) { 
       items.push(item); 
       seen_users.push(item.user.id); 
      } 
     }); 
     return seen_users; 
    }; 
}]);

並使用它在模板中像這樣

<li class="item" data-ng-repeat="item in (items | myFilter)">

來源

2013-12-11 22:42:17 zsong

這仍然遍歷每個項目（再次）。由於ng-repeat已經迭代了這些項目，我正在尋找一種方法來迭代一次以提高效率。過濾器的想法應該能夠讓我到那裏，雖然，也許只是檢查每個項目，因爲它傳遞給過濾器（不知道過濾器是一次應用於數組還是每次應用一次）。 –

使用AngularJS過濾JSON數據

回答

相關問題