This seems like such a simple thing, but I am just not able to wrap my head around how to do it.
Here is what I want:
<my-card>
<my-profile>
<my-address>101 Some St.</my-address>
<my-phone>555-555-5555</my-phone>
<my-description>I have a great profile</mydescription>
</my-profile>
<my-option doclick="Option(1)">Do One</my-option>
<my-option doclick="Option(2)">Do Two</my-option>
</my-card>
That turns into something like this:
<div class="card">
<div class="profile">
<div class="Address">101 Some St.</div>
<div class="Phone">555-555-5555</div>
<div class="Description">I have a great profile.</div>
</div>
</div>
I'm not sure what your data look like, but you simply use Angular tokens in your directive:
<my-card>
<my-profile>
<my-address>{{user.address}}</my-address>
<my-phone>{{user.phone}}</my-phone>
<my-description>{{user.description}}</mydescription>
</my-profile>
<my-option doclick="Option(1)">Do One</my-option>
<my-option doclick="Option(2)">Do Two</my-option>
</my-card>
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 was wondering if there were no compatibility issues when ng-switch-when and ng-class are using on the same element like in this sample.
I'm trying to dynamically change the class of this four elements but for some reasons this isn't working on all of them, just on the one who's currently displayed.
Does anyone know what's going on here?
<div>
<div ng-switch="sw" ng-init="sw=1">
<div ng-switch-when="1" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="2" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="3" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="4" ng-class="oneClassOrAnother()"></div>
</div>
<div>
<button ng-click="goTo(1)">1</button>
<button ng-click="goTo(2)">2</button>
<button ng-click="goTo(3)">3</button>
<button ng-click="goTo(4)">4</button>
</div>
</div>
Switch between divs.
$scope.goTo = function(x) {
$scope.sw = x;
}
Return one class or the other one.
$scope.oneClassOrAnother= function() {
if (...) return "class1";
else return "class2";
}
Many thanks.
It doesn't look like you're using the ng-class syntax correctly. Try something like this:
<div ng-class="{class1: oneClassOrAnother()}" ng-switch-when="1">1</div>
Where oneClassOrAnother() returns either true or false and "class1" is the name of the class.
Here's a working example of using ng-class and ng-switch-when together: http://plnkr.co/edit/n86SKEktRcPnBy05o8eZ?p=preview
Angular ngClass docs: https://docs.angularjs.org/api/ng/directive/ngClass
I think its all fine with your code, look at this plunk, I reproduced it and its working. Compare this to your code, maybe you have forgotten about controller?
http://plnkr.co/edit/Lz7L3S?p=preview
Only difference i guess is the fact, that I initiated sw from controller, not from view.
<div ng-switch on="sw">
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've just started working on a project that requires me to learn AngularJS. What I'm trying to do is create two menus that slide into the screen, one from the left, one from the right. When they do this they push the content over.
Currently I can get one or the other to work, but not both. I realize this is because of the way that I'm defining the ng-class. I just can't quite conceptualize how to do it correctly.
<div ng-class="{true:'slide-left', false:''}[toggleSlide]" class="container">
<div class="content">
<button ng-click="toggleSlide = !toggleSlide" class="btn-left">From Left</button>
<button ng-click="toggleSlide = !toggleSlide" class="btn-right">From Right</button>
</div>
<div class="slide-from-left">
<p>Here is information that slides from off screen left.</p>
</div>
<div class="slide-from-right">
<p>Here is information that slides from off screen right.</p>
</div>
</div>
Set up the ng-class syntax like this for what you want:
<div ng-class="{'slide-left':toggleSlide, 'slide-right':!toggleSlide}" class="container">
Also, I'm guessing you were trying to adapt your code to something else you saw, so I'll offer something on that also. Here's an ng-class using ng-repeat's $index to dole out classes for even and odd:
ng-class="['even', 'odd'][$index % 2]"