I have a list which I iterate with ng-repeat.
for each <li> element, I use ng-init="foo(item)" to calculate the value for display.
this is working well.
I want to implement a refresh button, but problem is that ng-init is not called again.
How can i enforce the call for ng-init again?
i've tried to call $scope.apply() but that did not help.
If re-rendering is not an issue, you can clear the ng-repeat array then add it back. This will re-render the ng-repeat causing ng-init to fire on each item again.
The downside to this is it will "flicker" depending how you have your css/animations setup. If you want the refresh to be seamless without visible change to the render, you'll likely need to use something other than ng-init.
I think it doesn't have to do anything with '$scope.apply()'. 'ng-init' will only fire once, during DOM rendering. Rather than using ng-init, did you try angular interpolation binding?
For example - <li><span>{{foo(item)}}</span></li>
Related
So, I'd like to show a div when a flag is set to true. I've been able to achieve this with ng-show by toggling the value of the flag with a button click.
However, I'd like to use ng-show when that flag is changed by something other than a button click. There is a stream of events that I'm taking in from my backend service, and one of the events would flip this flag, but ng-show never seems to fire off unless I trigger it specifically with a button. Right now, the only way that I can get that effect that I want is just by directly calling **document.getElementById().hidden = true/false.**
Any ideas? Thank you!
Maybe I'm misinterpreting your use case but it seems very simple: just use a variable in your controller / component and reference that variable in your ng-show.
// in your html
ng-show="myFlag"
// in your js
$scope.myFlag = true;
It may be a little more complicated depending on how you are using that backend service.
What is the best way to trigger/activate CSS animation from within a function in AngularJS?
In my case, I have a slide, which has one label <> and a button <>.
When a user clicks on the button, I'm calling an API, and on failure case, I need to animate the label.
One way will be to use ng-class directive. In which creating a scope variable, and set and reset value using $timeout service.
But I'm thinking of making a function something like playAnimation() and call this function which will trigger the animation.
What will be the steps for doing so in anularjs?
I'm using angularjs version 1.5.
I don't think creating a function would be better than using ng-class as you initially suggested. You could them benefit from Angular's animation classes (e.g. ng-enter, ng-leave etc), saving code in your scripts.
I understand that ng-show and ng-hide affect the class set on an element and that ng-if controls whether an element is rendered as part of the DOM
Are there any examples on choosing ng-if over ng-show/ng-hide or vice-versa?
You've already summed it up in your question. If you want to show and hide the DOM depending on a condition, use ng-show. This works well for DOM transitions between workflows, tabs, sections, etc.
<div ng-show="vm.tab == 'products'"></div>
If you only want to conditionally render the DOM if a condition occurs, use ng-if. This is particularly useful for permissions where you aren't interested in exposing any more DOM than necessary.
<button ng-if="vm.data.allowSubmit" ng-click="vm.submit()" />
If there is some information what you dont want to show to user any how.
You want that user cant see it anyhow even after editing DOM from inspect element then use ng-if otherwise use ng-show.
ng-show renders the dom but if condition is false then element display will be invisible.
`ng-if` renders the `dom` only if condition is true
There are situations when you are force to use ng-show
ex: Consider you are using any jquery plugin which runs on dom ready on any element. If element is getting rendered later when ng-if gets true then jquery will not work. In this case you will be need to use ng-show
The question is clear I guess. I want to be informed after an ng-model binding is completed and the value is reflected to the DOM element.
I am aware that this can't be done for all ng-model bindings in a document.ready fashion but I would like to be informed at least for a particular element after DOM binding is done.
Why would I need it? To solve this problem with Bootstrap Material Design theme: https://github.com/FezVrasta/bootstrap-material-design/issues/194
Any idea please?
you can use a $watch on the variable which is binded to ng-model
work around
$timeout is executed when all the DOM manipulation is done , this assures that changes of your model have been reflected in the DOM
I have a custom directive that has to be hidden when my page loads, but later if the user clicks something it shows the directive. However, the ng-hide is placed on a parent node outside the dom node the directive lives on. This directive needs to run some code to place its components, but it has to run it when the parent dom node is shown. How can I get notified the dom has changed and the directive is now being shown so I can run my code to calculate the size?
If I don't hide the directive everything works great. However, if I hide it. It fails to render properly.
So, while ng-show or ng-hide are ok for simple DOM elements, sometimes it's better to use ng-if and basically delay the rendering until the show condition has been met. This will in most cases avoid bad renders that can happen when things are rendering in the background using ng-hide or ng-show.
ng-if was introduced in 1.1.5 and it's basically a simplified ng-switch. It was inspired by Angular-UI's ui-if.