使用AngularJS过滤JSON数据

Question

I'm binding JSON objects to a list, but I only want to show one (the first, since the results are ordered) item per user. The JSON I'm getting back is per item, with a user object as a property (item.user.username, etc.). With jQuery I'd do something like:

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);
    }
}

But is there a more Angular-thonic way to do this? I've been looking at filters but can't figure out an easy way (other than iterating through the bound data like above) to do this.

UPDATE:

AngularJS code is a little much to post, but basically I have a $scope.items array of JSON objects in my controller that I get via an API courtesy of $http and an ItemFactory, and pretty basic HTML to display things:

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

Answer 1

You can create a custom filter like this

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;
    };
}]);

And use it in the template like this

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

Answer 2

In your html you can index your array like this: UPDATED:

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

and you script should be like:

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

There is a couple of other way to do this. If you want it to be dynamic (eg If you want to display more items on demand later:

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

The script for that would be like:

$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]);
};