ng-repeat finish event
Indeed, you should use directives, and there is no event tied to the end of a ng-Repeat loop (as each element is constructed individually, and has it's own event). But a) using directives might be all you need and b) there are a few ng-Repeat specific properties you can use to make your "on ngRepeat finished" event.
Specifically, if all you want is to style/add events to the whole of the table, you can do so using in a directive that encompasses all the ngRepeat elements. On the other hand, if you want to address each element specifically, you can use a directive within the ngRepeat, and it will act on each element, after it is created.
Then, there are the $index
, $first
, $middle
and $last
properties you can use to trigger events. So for this HTML:
<div ng-controller="Ctrl" my-main-directive>
<div ng-repeat="thing in things" my-repeat-directive>
thing {{thing}}
</div>
</div>
You can use directives like so:
angular.module('myApp', [])
.directive('myRepeatDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('color','blue');
if (scope.$last){
window.alert("im the last!");
}
};
})
.directive('myMainDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('border','5px solid red');
};
});
See it in action in this Plunker. Hope it helps!
Calling a function when ng-repeat has finished
var module = angular.module('testApp', [])
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit(attr.onFinishRender);
});
}
}
}
});
Notice that I didn't use .ready()
but rather wrapped it in a $timeout
. $timeout
makes sure it's executed when the ng-repeated elements have REALLY finished rendering (because the $timeout
will execute at the end of the current digest cycle -- and it will also call $apply
internally, unlike setTimeout
). So after the ng-repeat
has finished, we use $emit
to emit an event to outer scopes (sibling and parent scopes).
And then in your controller, you can catch it with $on
:
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
//you also get the actual event object
//do stuff, execute functions -- whatever...
});
With html that looks something like this:
<div ng-repeat="item in items" on-finish-render="ngRepeatFinished">
<div>{{item.name}}}<div>
</div>
ng-repeat finish event not working after sorting
I used AngularJS directive this issue is solved.
Date picker TD is below:
<td align="center" style ="width: 229px;"><input type="text" class="datepicker" ng-change="dateChange($index, row)" datepicker ng-model="row.startDate" readonly="readonly" style="cursor: default"></td>
Directive Code:
.directive("datepicker", function () {
return {
restrict: "A",
link: function (scope, el, attr) {
el.datepicker({
dateFormat: 'dd/mm/yy'
});
}
};
})
Call a javascript function when ng-repeat finishes
Check out this answer Stack Overflow. Setting a timeout is never a good way to wait til something finishes. I would suggest a custom directive checking to see if you are scope.$last, then you can broadcast an event to the controller.
Related Topics
Create a Date With a Set Timezone Without Using a String Representation
How to Parse a CSV String With JavaScript, Which Contains Comma in Data
Converting an Object to a String
Scrollintoview() Causing the Whole Page to Move
How to Concatenate and Minify Multiple CSS and JavaScript Files with Grunt.Js (0.3.X)
How to Inject CSS into Webpage Through Chrome Extension
Change Text on Hover, Then Return to the Previous Text
Jquery Live Scroll Event on Mobile (Work Around)
Jquery Validate Plugin - How to Create a Simple Custom Rule
How to Check If File Exists in Jquery or Pure JavaScript
How to Calculate Date Difference in JavaScript
Check If a Value Is an Object in JavaScript
Sending Command Line Arguments to Npm Script
How to Hover in Reactjs? - Onmouseleave Not Registered During Fast Hover Over