使用来自指令Angularjs的数据过滤ng-repeat表

Question

I have an array of object that I use in a ng-repeat loop with an attribute referring to an another object by it's id.

{Description: 'something', OtherObjectId: 1}...

I'm using a directive to display information about the OtherObject in that ng-repeat loop.

<li ng-repeat="object in objects">
   <div>{{object.Description}}</div>
   <div other-object-info="date" other-object-id="{{object.OtherObjectId}}"></div>
</li>

The otherObjectInfo directive use innerHtml to put the requested info in that html tag

Now is the part that doesn't obviously work, I need to be able to filter that list with all the displayed informations, including the one inserted by the directives.

How would you resolve it? I guess the best way would be to include the OtherObject inside the objects array before rendering the view, but I like the simple way of using that directive because I need it in multiple views.

Thank you very much for your output!

Answer 1

Consider a custom filter for the ng-repeat. You would keep the other objects separate from the array and pass whatever you need to the custom filter function:

<li ng-repeat="object in objects | filter:customFunct(otherObjectCollection)">

$scope.customFunct = function(otherCollection) {
    return function(object) {
       // locate the target object within otherCollection using object.OtherObjectId
       // eg you can use this if you're using lodash:
       var targetObj = _.find(otherCollection, {id : object.OtherObjectId});
       // make the comparison you need
       // use 'return' to return true based on the comparison
       return targetObj.value > 40;
    }
}

In this way, you can define and use a custom filter with a passed argument.

You can read more discussion on this solution here:

https://stackoverflow.com/a/17813797/1220172

https://stackoverflow.com/a/17811582/1220172