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>
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>
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>
I want to have a login view outside ng-view, but is it even possible with angular.js? couldnt find any examples of folowing on the internet. Example is descibed below.
<div class="container">
<div class="header">
<div class="loginView"> my huge login view</div>
</div>
</div>
<div class="container">
<div ng-view></div>
</div>
Yes. Assign a controller to the loginView and treat it like any other view.
ng-view is just used when using the $routeProvider to define routes.
This is perfectly valid. ngView is used to complement the router. This means it is just a directive as any other. You can put anything around it.
It sounds like you want something like this: Live demo here (click).
<div class="container">
<div class="header">
<div class="loginView" ng-include="'login.html'"></div>
</div>
</div>
You could also include your file from a $scope property like this:
$scope.foo = 'login.html';
<div ng-include="foo"></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.
I would like to use ng-switch because I do not want the other elements that I do not want to show to be part of the DOM. That is why i did not use ng-hide/ng-show. In the example below, I would like to only have the span tag be in the DOM without the div wrappers from the ng-switch. What is the best way to accomplish this?
<div ng-switch on="user">
<div ng-switch-when="true">
<span>One</span>
</div>
<div ng-switch-when="false">
<span>Two</span>
</div>
</div>
You can use the ng-switch directive as a custom element and not specify the div in the first place. For example:
<ng-switch on="user">
<span ng-switch-when="true">One</span>
<span ng-switch-default>Two</span>
</ng-switch>
Here is a plunker to play around with: http://plnkr.co/edit/zni6raUWOguhQh9jDiY3
the solution provided by #ChrisAuer this still creates a wrapping element.
AFAIK you'd have to use a custome directive. You may want to use angular-ui if
<div ui-if="user">
<span>One</span>
</div>
<div ui-if="!user">
<span>Two</span>
</div>
Probably, in your case, you'd be fine using ng-show or ng-hide which only hide(display:none) the element - they don't remove it form the DOM.
<div ng-show="user"> <!-- same as ng-hide="!user" -->
<span>One</span>
</div>
<div ng-hide="user"> <!-- same as ng-show="!user" -->
<span>Two</span>
</div>
I would say use ng-if, like this:
<div>
<div ng-if="user==true">
<span>One</span>
</div>
<div ng-if="user==false">
<span>Two</span>
</div>
</div>
you can use <span> to prevent your html layout changing
because <span> is not like <div>, it won't take up any space.
<span ng-switch="user">
<span ng-switch-when="true">One</span>
<span ng-switch-default>Two</span>
</span>