According to Exploring Angular 1.3: One time bindings;
Using new syntax is as easy as starting an expression with ::. So if we apply the one-time expression to our example above, we change this:
<p>Hello {{name}}!</p>
To this
<p>Hello {{::name}}!</p>
and it is now one way binding.
But how can we create a one time binding when using angular directives such as ng-class? I tried the following, but it did not work:
ng-model="::name"
ng-class="['label',{'label-danger': 'High' == ::tsk.Priority}]:
Got my answer here http://toddmotto.com/angular-one-time-binding-syntax/
{{ ::vm.user }}
<div ng-if="::vm.user.loggedIn"></div>
<div ng-class="::{ loggedIn: vm.user.loggedIn }"></div>
<ul>
<li ng-repeat="user in ::vm.users"></li>
</ul>
Thanks to downvoters.
Related
I am trying to bind html to my div element, but dont really know how to do it. I am not great with angularjs, but should ng-bind-html do the trick?
This is how I tried to do it,
<div ng-bind-html="{{tile.Info.Title}}"></div>
<div ng-bind-html="{{tile.Info.Content}}"></div>
In angular 2 its just [innerHTML], cant get it to work here, any suggestion?
You can get an example here.
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
As also suggested in comments by #Aleksey when you are using ng- there is no need to use curly brackets {}. So your code should be like:
<div ng-bind-html="tile.Info.Title"></div>
<div ng-bind-html="tile.Info.Content"></div>
I've seen some examples where a div tag has a controller defined, but the directive is not:
<div ng-app="contestantApp">
<h1>Contestants</h1>
<section ng-controller="ContestantsCtrl as ctrl">
<ul>
<li ng-repeat="contestant in ctrl.contestants">
{{contestant.firstName}} {{contestant.lastName}}
</li>
</ul>
<myapp-contestant-editor-form contestants="ctrl.contestants">
</myapp-contestant-editor-form>
</div>
Is this bad practice implementing a controller without a directive? Are there situations this would be useful?
Thanks
Can someone please explain to me why the following code is working in angular but not angularDart..?
<div ng-repeat='number in [1,2,3]' ng-switch on='number'>
<div ng-switch-when='2'>This is numer two!</div>
</div>
Thanks!
As I seems to me, the API for AngularDart doesn't have the on attribute while the Angular API leaves the programmer the choice between using ng-switch on='...' or ng-switch='...'.
So for both, Angular and AngularDart, the following might work:
<div ng-repeat='number in [1,2,3]' ng-switch='number'>
<div ng-switch-when='2'>This is numer two!</div>
</div>
Hi all you experts out there.
My testing area: http://plnkr.co/edit/ddJT1e4a8L5NTSIVNTk7
I am trying to visualize hierarchical data in a tree-form with Angular, even though i'm using some samples to aid me in my quest (like http://jsfiddle.net/alalonde/NZum5/ and http://jsfiddle.net/brendanowen/uXbn6/8/) i fail.
As soon as i place the recursive element ng-include inside the ng-repeat in side the template it self, the memory usage of its browser-window goes through the roof and effectively hangs the browser. But the available tree-sample i could find are doing just that.
What am i missing?
You need to use the same variable name in the template. The current node is called node in the controller then child in the template.
This cause the template to render the same node over again.
It works fine if you use the same variable name :
<li ng-repeat="node in node.children" ng-include="'node.html'"></li>
See it in action here : http://plnkr.co/edit/mjfdSEDcMK8kGCRjS6V6?p=preview
If anyone here wants to avoid having the extra ng-repeat outside of the template (where it kind of includes stuff from the template anyway), here's a fiddle showing how to do it:
http://jsbin.com/hokupe/1/edit
Also here's a blog post and a 10-15 minutes video on how it works:
http://gurustop.net/blog/2014/07/15/angularjs-using-templates-ng-include-create-infinite-tree/
Sample Code:
<script type="text/ng-template" id="treeLevel.html">
<ul>
<li ng-repeat="item in items">
<input type="checkbox"
name="itemSelection"
ng-model="item._Selected" />
{{item.text}}
<div ng-include=" 'treeLevel.html'"
onload="items = item.children">
</div>
</li>
</ul>
</script>
<div ng-include=" 'treeLevel.html' "
onload="items = sourceItems">
</div>
I tried using ng-click to update the variable used in ng-switch, but ng-switch doesn't seem to have picked up the change. See the example here:
http://plnkr.co/edit/jx8DNlrJDuaUBKVwZQtQ
What am I doing wrong?
You're running into scope inheritance issues. See: http://docs.angularjs.org/guide/scope
Fixed version: http://plnkr.co/edit/ENm5HBYno8yHblLlE8CA?p=preview
You just weren't toggling. Try this.
<div ng-switch on="edit">
<div ng-switch-when=true>
<a ng-click="edit=!edit">Cancel {{edit}}</a>
</div>
<div ng-switch-when=false>
<a ng-click="edit=!edit">Edit {{edit}}</a>
</div>
</div>