I'm having difficulty getting a css animation for movement in an angular ng-repeat list. I have a plunker here: http://plnkr.co/edit/KIcTiJ?p=preview
As you can see, the ng-enter animation is processed when the plunker is first loaded. However, I can't find any way to have an animation get triggered for list movement. In the example, by clicking on the arrows, the ng-hide is processed, and I would expect the ng-move animation to be triggered, but I'm wondering if I'm misunderstanding how the ng-repeat move animation is triggered.
In either case, can anyone suggest a better way for me to get angular 1.2 animations applied to this list when I click the left and right arrows in that example? I have tried alternate methods of generating the ng-repeat (I could use an angular filter instead of an ng-hide), and I've tried different css transitions, but I can't seem to get anything to work. Any advice here would be greatly appreciated on how to progress.
Sorry if this question seems like a repeat, but I looked through similar questions on stackoverflow, but the only other answers I could find were for the older angular animation framework, or suggested custom javascript animation, which I was hoping to avoid.
ng-repeat animation work if the collection has changed. You can use $filter to reflect your change in the collection.
<li ng-class="{'text-danger': item == f}" ng-repeat="item in items| filter: filteredData" class="animate-repeat">
<span>{{item}}</span>
</li>
Here filteredData is a controller function which execute your filter logic. (you can write custom filter as well)
$scope.filteredData = function(item) {
return (Math.abs($scope.f - item) < 2);
}
Check the updated Plunker how animation works.
Related
I'm using the smart-table without $scope object, it looks fine, but the selection and callbacks works weird (selection happens only half the time) or do not work at all.
Here, I found an example, as you can see, the row selection works fine.
But if we change syntax to use 'controller As' style, then, it does not work
For now, I will modify my code to use the $scope. But, being a beginner in AngularJS, I would be glad if someone told me why this happens and is there any way to fix that, thank you beforehand.
your ng-options should be like this
<select ng-model="events"
ng-options="event as event.label for event in vm.events"></select>
the event as event.label for event in vm.events means you're pointing to event.label as the event model for each event in vm.events
ngOptions
then add data in the controller
here is your updated plunk
Edit 1
to select the entire row you can bind ng-click to the <tr>, and pass it the current row, like so
<tr ng-click="vm.selectRow(row)" ... >
to highlight the row, you can use ng-class like so
<tr ... ng-class="{"highlight": row.selected===true}">
and handle the selection logic in the controller. there are a lot of ways to implement this.
forked the last plunk
I know this kind of question has been asked before, but today I face a little different case.
Here is a sample code of my case:
plnkr.co/edit/paMfJjon3aYyBDvjZxur
Suppose you have a ng-repeat with Angular stagger animations on each items. The length of the list is variable, so the time to complete the animation is unknown.
I tried to use a callback like $animate.on('leave', element, …) but it fires on each and every list items, not when the global items collections finishes to be emptied.
What could be done here?
Thanks!
Seems like since the animations are created using CSS using ng-class and referencing item.$last should do the trick.
I wrote a directive which displays a list of elements. After list change the old list moves to the left followed by the new one. To achieve this behavior use ng-repeat directive and css3 transitions. I noticed that animations classes(ng-animate ng-enter ng-animate-start ng-animate-active ng-enter-active) are not beeing removed after animation end and the old node ceated by ng-repeat loop is also not removed.
Example in plunker: http://plnkr.co/edit/gqRIIUJF55NNvlt9lqMz?p=preview
The problem occurs in firefox. Under chrome everything is fine.
I would be grateful if you tell me what I'm doing wrong, or if it is a angular issue.
That's because the ng-animate/ng-animate-start... are removed since angularjs v1.2.0 so you don't need to use them, check the docs or this example by kevin-smets.
I have read some articles that said ng-repeat would led to poor performance if there is over 2000 items, because there are too many two way binding to watch. I am new to angularjs and have trouble understanding the relationship between ng-repeat and two-way binding:
Does ng-repeat (like outputting a list of json objects) necessarily create two way binding?
Is there a simple way to do ng-repeat using only one way binding? (preferably do not need external module)
Like user1843640 mentioned, if you are on Angular 1.3, you can use one-time-binding, but, just for clarity, you need to put the :: on all the bindings, not just the repeater. The docs say do this:
<div ng-repeat="item in ::items">{{item.name}}</div>
But, if I count the watchers, this only removed one. To really drop the number of two-way-bindings, place the :: on the bindings within the repeater, like this:
<div ng-repeat="item in ::items">{{::item.name}}</div>
Here are two plunkers that will display the number of watchers:
All Bindings
Repeater Only
Thanks goes out to Miraage for provinding the function to count the watchers https://stackoverflow.com/a/23470578/2200446
For anyone using or upgrading to Angular 1.3 you can now use "one-time binding". For ng-repeat it would look like this:
<div ng-repeat="item in ::items">{{item.name}}</div>
Notice the ::items syntax.
For more information check the Angular documentation for expressions.
This blog post presents some interesting solutions. The end result was:
Upgrade to AngularJS 1.1.5 and use limitTo together with Infinite scrolling. AngularJS ng-repeat offers from version 1.1.4 the limitTo option. I slightly adapted the Infinite Scroll directive to make scrolling within a container possible that does not have height 100% of window.
Basically you limit the number of objects you initially render, then use the Infinite scrolling directive to render more as needed. Since you don't want an external module, just mimic the infinite scroll functionality as needed with your own script.
Note: This should solve your performance problem but it won't remove two-way binding.
what ever is generated by ng-model will be having a watcher on data(model) which reduces the page performance if it crosses 200 watchers.
Refer this for ONE WAY BINDING http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/ but make sure you use it properly
Hope it helps!!!
I am trying to create Master Details in table
here is the plnkr Code
but as i start putting filter for the ng-repeat the dom rendering behaves weird
click the + button to expand row and the search the textbox
am i doing some thing wrong
My guess is that ng-repeat-end and ng-if do not play well together. If you place the ng-if in the <p> element, your example is working. Of course this has the (undesired?) effect of allways including the details row in the DOM, event though it will be hidden.