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.
Related
I have a collection of objects that AngularJS filters by a text search within a title property on each object.
After this filter has run, I am left with a set of items that matches this filter.
I would like to iterate over this subset of the list, after clicking a button, and change a property on the items that match this filter.
Is there an easy way to do this in AngularJS, or am I going to be doing this outside Angular and then updating the state manually in the controller?
When the user clicks the button you can get this values and make some change. But I think you need do it inside your controller.
It appears that within an ng-repeat you can do the following
item in items | filter:x as results will store the fragment of the repeated items as results, but only after the items have been processed through the filter.
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/
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.
I have an array in which I'm adding elements. Then, in the template, all the elements are being displayed. The issue is that only the first time an element is added to array, only then the template is being added, afterwards, whenever an element is added to the template, the template is not updating though the element is properly being inserted into the array.
How to make the template update every time the content of the array changes?
A worked example on JSBin: http://jsbin.com/pamequ
For ember to properly react to changes to your selectedTags array, you need to use
selectedTags.pushObject(tag);
instead of
selectedTags.push(tag);
Working example here
More on pushObject here
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?