I have custom directive that is using controllerAs and binding an external controller. The controller function is to render the list in the html under an input box. Earlier this controller was with in the directive, it was not bound to directive and every thing was working fine and ng-reapeat was showing the list and list was tracked by $index so not duplicates were shown. But since the time I have moved the controller outside directive the track by $index have stopped working it showing me the duplicates in list.
What's missing ? Do I need to define index in controller or use it as controller.$index?
Related
I have a ng-repeat that lists users and uses a custom directive.
My custom directive has some event handlers like click handlers etc.
This vm.UserList will get modified every time a drop down list value is changed in the UI. My question is, will the event handlers get updated whenever the UserList is modified by a drop down list?
The dropdownlist on change will make a remote API request and then set the JSON result of the users to the value of the UserList.
<div ng-repeat="u in vm.UserList">
<div><div my-custom-directive user-id="{u.id}" >{u.email}</div></div>
</div>
</div>
Yes, it does. According to angularjs documentation:
ngRepeat uses $watchCollection to detect changes in the collection.
When a change happens, ngRepeat then makes the corresponding changes
to the DOM:
1- When an item is added, a new instance of the template is added to the
DOM.
2-When an item is removed, its template instance is removed from
the DOM.
3-When items are reordered, their respective templates are
reordered in the DOM.
So your directive gets added to the page including all of the event handlers.
I needed an circle progress indicator within cells of a table, which is rendered through an ng-repeat. So, I used an angular plugin, Which is an basically angular directive. When i use this directive within an ng-repeated div, those directive aren't compiling correctly. And, the directive is working correct, if there is no ng-repeat. Click here to view an plunker, demonstrating above issue..
I am using ng-repeat for my Model render in angular ,
if i Push new Element in Model/Collection , Will angular only deal with Update or Loop through the whole model again.??
My experience (using Angular version 1.2.7) is such that whenever something changed in collection, the whole ng-repeat was repainted.
You can easily test it by modifying the generated DOM. For example by adding custom attributes like my-id="1", my-id="2" etc to the DOM elements.
Then change something in your collection, which will trigger new $digest cycle.
Angular will pick up the change and redraw the DOM -> your custom attributes will disappear.
So I would argue that Angular loops through the whole model.
In the documentation it is clearly mentioned:
ngRepeat
ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope
Angular associates an identity to every item, the elements already associated to the existing items of the collection won't be recreated.
Hence, only elements that are removed from the collection, are removed from the DOM. Furthermore, if an item moves within the collection it doesn’t need a new scope, but it needs to be moved in the DOM.
I have a directive that turns a collection of items into a variable number of columns. The template for the directive uses ng-repeat to repeat the columns, and ng-class to apply a css class that turns the div into a column. The problem is angular throws errors when using the ng-class on same line as ng-repeat. Removing it fixes the issue, but the directive doesnt work properly. Now, this same functionality works fine in normal angular views, but not when used in a directive template.
Here is a plunkr i put together to demonstrate:
http://plnkr.co/edit/MKAbQR?p=preview
I have a checkbox (bound to a model), placed inside an ng-repeat tag which iterates over a list.
I want to send a value "YES" or "NO" depending on whether the box is checked or not to the controller using the ng-true-value and ng-false-value attributes.
But for some reason, the $scope.value2 is not getting updated in the controller.
Here is a jsFiddle with my problem:: http://jsfiddle.net/HmvgW/
Note: If I place the checkbox outside the ng-repeat tag, the YES/NO value is sent correctly to the controller.
How do I send a value to checkbox clicked value to the controller if I place it inside the ng-repeat tag?
Thanks!
It's a scope issue. ng-repeat creates a new child scope with each loop. If you want to access the parent scope from within the child, you can do so with $parent.value2.