0

I have a list being generated from ng-repeat and it's rendering a component tag on each iteration. And I'm giving each iteration a unique id utilizing the $index value.

That looks like this

<div ng-if="$ctrl.myArr.length > 0" ng-repeat="obj in $ctrl.myArr">
    <myCustomComponentTag id="L1-{{$index}}" obj="obj"></myCustomComponentTag>
</div>

I need to run some jquery on these unique ids, which are populating just fine. The view will successfully show the tags to have ids of #L1-0, #L1-1, #L1-2

The snag is that my function running my jquery is executing before the view fully loads and the id values actually populate with the value of $index

My jQuery is searching for $(`#L1-${i}`) in a loop. If I store #L1-${i} in a string variable and output its value it will return '#L1-0'.

But '#L1-0' does not exist yet, as the view has not been fully populated. When I break on my function the ids on the elements only read L1-{{$index}} and have yet to populate.

I've read in several places to try this directive. This is still not working. It seems that just because my ng-repeat has reached its last element, it does not mean the view has populated and my ids are fully loaded and in place.

How can I execute my jQuery function only after the view is fully populated with my data?

Edit:

This is the jQuery function

jqFn= () => {
    if (this.myArr.length > 0) {
        for (var i: number = 0; i < this.myArr.length; i++) {
            $(`#L1-${i}`).css({
                /*
                Add various styles here
                */
            });
        }
    }
};
Chris
  • 443
  • 5
  • 25
  • Please tell us what you are trying to accomplish with the jQuery. Maybe there is an "Angular" way to do the same thing. – georgeawg Apr 26 '17 at 20:19
  • In future, I would just stick to one library Angular or jQuery. They can accomplish almost the same things so no need to have both. – Nikita Chernykh Apr 26 '17 at 20:55
  • Consider using the [ng-style directive](https://docs.angularjs.org/api/ng/directive/ngStyle) to add CSS to elements based on the `$index` value. – georgeawg Apr 26 '17 at 20:56

2 Answers2

0

Perhaps you can try something like this

Disclaimer: I have found it one of the comments on the link that you referenced in the post.

Community
  • 1
  • 1
Muhammad Bashir
  • 97
  • 8
  • No dice it would seem. I added the ng-init attr and when it executed I had a break on my function. I went to look at my elements, and they had not loaded in fully. There were 3 elements present, representing the 3 object from my array. But they were not fully loaded at the time of my function executing. They only had ids of L1-{{$index}} and had not yet replaced the word $index with the value of $index – Chris Apr 26 '17 at 20:09
  • can you please add your controller logic so that we can have a clear idea of how you are trying to achieve your goal! – Muhammad Bashir Apr 26 '17 at 20:14
0

The solution I used for this was a recursive function that set a timeout and searched for the id of the last object in the repeat statement until it exuisted. The id could not exist until the dynamic data from the $watch fully loaded in. This guaranteed all my data was accessible.

Code looked similar to this

setListener = (el, cb) => {
    if ($(el).length) {
        cb();
    } else {
        setTimeout(() => {
            this.setListener(el, cb);
        }, 500);
    }
};
Chris
  • 443
  • 5
  • 25