I have created a directive and using inside ng-repeat. I am using remove button also to remove specific element from the list. The issue is, whenever I remove specific element from list, it always trigger $destroy in my directive on the last element in the list instead of specific element.
For example, I have 4 elements in the list like [1,2,3,4]. My directive displays 2 text boxes. I uses ng-repeat to iterate over list and display directive with 2 textboxes and remove button in every row. Now I clicked the remove button on 2nd row, but it triggers the $destroy on 4th element in my directive instead of 2nd.
Any idea how to fix this, to trigger the $destroy on specific element only.
It's due to track by $index, in which case it will always remove the last row in the list.
Related
I am removing an element in ng-repeat using javascript splice method ..elements of my ng-repeat are in two rows not in list styles ...now i need to apply a animation on the rest of element(not on the element being removed. when rest of element re adjust them..according to their position ...mainly i need to show the animation when they move from one place to another .
I have created a plunkr. Where I need to get the custom directive repeating . However what I need is when i click the check button then all the inputs should be populated inside the slides array in presentation-controller and then I can work with that array.
The problem is the directive is actually adding inputs. When I click the check button, all the inputs should be populated inside the presentation-controller's $scope.slides[] array.
Repeating directive attaching to controller array property
I think your problem is on the view template slide-input.html, here you write ng-bind="slides[0]" and in presentation-controller you write $scope.slides= ["hello"] , when you click plus icon, adding a new directive ,slides[0] always displayed you 'hello'
I have an ng-repeat with a filter. When some items are filtered out by the filter and then they are restored after another filter change there are new DOM elements created for these items. If there was any DOM manipulation on the item it gets lost after item is hidden and restored with filter.
Is there a way to keep the DOM elements, even when item is removed by filter?
I tried using track by, but it doesn't help.
Here is a fiddle that recreates the problem.
Steps to recreate:
Click the button to apply colors to DOM elements
Type something in the filter input (for example 'ap') to hide some of the elements
Remove the filter. The restored elements lost their style.
Angualr is dynamically adding and removing those templates. By template I mean whatever tag(s) are inside your ng-repeat. There is no way to preserve that in an ng-repeat. Instead, if you want this color change to be preserved, it needs to be a part of the model you are ng-repeat ing over. Does that make sense?
Add the color directly to the template style="color: {{fruit.color}}"
See this for what I am talking about
http://jsfiddle.net/nferjvsp/1/
This forked Plunker shows two ng-repeats each displaying an array as a list. Each list item uses a custom directive to animate whenever an up or down arrow is clicked.
The first list, which records changes to array item values animates correctly but the second, which records changes to array item indexes does not.
Can anybody suggest how to edit the directive to animate the second list correctly?
The way you move the elements triggers incorrect animation. Try to do it like this
function arrayMove(arrayVar, from, to) {
var item = arrayVar.splice(from, 1).pop();
arrayVar.splice(to, 0, angular.copy(item));
}
You need to make a (deep) copy of the element to preserve some properties like $$hashkey used by AngularJS to track the objects.
I have a similar issue to what is stated in the 2 posts below - I have 3 ng repeats in a partial, when I update the source arrays the changes are not reflected in the view.
ng-repeat's element not updated on array modification
AngularJS not refreshing ngRepeat when updating array
The ng repeats are within 3 ul's with each listing out input checkboxes with ng click on each, if I check an input from the the first list then my js code runs through the other 2 arrays, finds matching inputs and sets a property called IsSelected to true which is bound to ng checked of each input. e.g regions in the first list - if I check europe, then it checks all the European countries in the second list, and all the related cities in the 3rd list when I click on an apply button. $scope.$apply() after the js code for setting IsSelected doesnt work, but if I set the arrays to null then the view appears empty for that particular list. I then tried to use track with a property that constantly changes when I update the array elements like a guid but that also doesnt work. If it was a scope issue then why would setting the array to null then update the view as suspected?