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>
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
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.
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>
updated: made a smaller poc, in plunkr to show the problem without the entire application around it.
see it here
issue: data-ng-switch works on inline content, but does not remove the previous element when switching using external templates via data-ng-include.
works
<div data-ng-switch="view">
<div data-ng-switch-when="template1">content 1</div>
<div data-ng-switch-when="template2">content 2</div>
</div>
doesn't work
<div data-ng-switch="view">
<div data-ng-switch-when="template1" data-ng-include="'template1.html'"></div>
<div data-ng-switch-when="template2" data-ng-include="'template2.html'"></div>
</div>
Best solution I currently found can be seen in the plunkr
you basically cannot use ng-include on the same dom level as the ng-switch anymore. The same goes for other logical directives like ng-show ng-hide...
adding the ng-include on a child node of the ng-switch-when element works:
<div data-ng-switch="view">
<div data-ng-switch-when="template1">
<div data-ng-include="'template1.html'"></div>
</div>
<div data-ng-switch-when="template2">
<div data-ng-include="'template2.html'"></div>
</div>
</div>
update
Should be fixed in .rc3!
This was confirmed as a bug in the angular rc2 version (confirmation in this google group discussion).
The actual bugticket can be found here.