1

I searched for an answer to this first and found the following which I think was incorrectly closed:

previously closed question

<div class="medium-3 columns" ng-repeat="friend in data.friends.items | selectedFriendsCountries:friendsCountries" data-foundation-update>
        <c:url value="friends-and-stories/friend/{{friend.code}}" var="url" />
        <article class="promo-article-small row collapse">
            <div class="medium-12 small-6 column promo-image-wrap">
                <a href="${url}"><img class="promo-image" src="{{friend.primaryImageUrl}}"></a>
            </div>
            <div class="medium-12 small-6 column">
                <a class="promo-block-link" href="${url}" data-equalizer-watch>
                    <header class="promo-header">
                        <h1 class="headline-tiny">{{friend.name}}</h1><span class="headline-tiny-thin">{{friend.profession}}</span>
                    </header>
                    <p class="promo-paragraph hide-for-small-only">{{friend.briefDescription}}</p>
                </a> 
                <a class="link-article left-large" href="${url}">{{friend.linkLabel}}</a> 
                <feature:on feature="storefront.enable.site.ecommerce">
                    <a class="link-favorites right-large" href="${url}">
                        <i class="hl hl-heart-add hl-25"></i>
                        <span><spring:theme code="text.add" /></span>
                    </a>
                </feature:on>
            </div>
        </article>
    </div>

Filter:

filter('selectedFriendsCountries', function() {
return function(friends, friendsCountries) {
    return friends.filter(function(friend) {
        for (var i in friend.countries) {
            if (friendsCountries.indexOf(friend.countries[i]) != -1) {
                return true;
            }
        }
        return false;
    });
};
})

I want to update the foundation library so that my items get equalized height after ng-repeat has completed.

The problem, which was also mentioned in the other question, is that if you have a custom filter, then you cannot use a directive which checks for the $last iteration of the repeat if you add or remove items from the custom filters model.

How can one know when items have been iterated over using ng-repeat if you change the model of a custom filter?

Please do not close as a duplicate unless there is an answer

UPDATE:

Please see this FIDDLE which has an example of the issue.

You will see by default that "UK" is filtered and one person is showing. If you then click "Switzerland" it still works, but finally you choose "USA" and it fails, you no longer get the alert showing that we can find the scope.$last item.

Community
  • 1
  • 1
Neil
  • 7,861
  • 4
  • 53
  • 74
  • Hi @Neil! It's been a while, but I've found a solution for this problem, please have a look at my updated answer, thanks! – Josep Sep 29 '14 at 03:12

1 Answers1

2

I've posted an answer in this question "Calling a function when ng-repeat has finished" that should also solve your issue.

Also, here you will find an updated version of your jsfiddle working for your example.

The solution is quite hacky (read the answer that I've given in the other question) but the idea is to use this filter:

.filter('ngRepeatFinish', function($timeout){
    return function(data){
        var me = this;
        var flagProperty = '__finishedRendering__';
        if(!data[flagProperty]){
            Object.defineProperty(
                data, 
                flagProperty, 
                {enumerable:false, configurable:true, writable: false, value:{}});
            $timeout(function(){
                    delete data[flagProperty];                        
                    me.$emit('ngRepeatFinished');
                },0,false);
        }
        return data;
    };
})
Community
  • 1
  • 1
Josep
  • 12,926
  • 2
  • 42
  • 45
  • Thank you for your answer, please amend your example so that your filter has the ability to have items added and removed. What happens is that you no longer have ability to use scope.$last which means your example will fail. – Neil Sep 17 '14 at 16:58
  • 1
    You just said: "please amend your example so that your filter has the ability to have items added and removed", and in my filter I'm doing this: "return function(items){items.splice(0,2,7,8);return items.filter(function(item){return item%2==0;})}", I'm deleting 2 items, adding 2 more, and then filtering to grab just a few of them... And it still works. So, yep, you better explain this a bit better because I'm quite lost right now. – Josep Sep 17 '14 at 17:14
  • What you did was edit the actual items, you didn't give ability to add or remove "filters" from your filters, see update. – Neil Sep 17 '14 at 17:47
  • Josep thanks for the update, it was based on my first fiddle, I changed it to allow removing of items as well as adding - still fails - http://jsfiddle.net/92wnyuss/5/ – Neil Sep 18 '14 at 10:39