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>
Related
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>
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 am doing Angularjs project and I need to freeze a div in that depend on a condition. I tried to use ng-disabled but Its not freezing a div for me. This is the code
<div ng-repeat="item in list.items" ng-disabled="true">
Help would be really appreciated.
Edited :
<div ng-repeat="item in list.items" ng-click="goToFunction()" ng-disabled="true">
now I have another problem, As you guys suggested me I can change the css. But the problem is every div has got a ng-click So even if it is look like disabled in css it will call to the function. So how can I prevent it?
Thanks in Advanced.
if you are using bootstrap3, you can use text-muted class if the div contains text and apply styles based on a condition
<div ng-repeat="item in list.items" ng-class="{'text-muted':item.myCondition}">
the DIV element doesnt support the disabled attribute.
or you can use css to make the div element support that attribute.
<div ng-repeat="item in list.items" ng-disabled="item.myCondition">
css
div[disabled]{
color:grey;
}
You are trying to use ng-disabled in DIV which in invalid. You can achieve this by applying css class conditionally like this.
<div class="box" ng-repeat="item in items" ng-class="{'disable-mode':item%2==0,'normal-mode':item%2!=0}">
</div>
Working Demo
I'm trying to show the user a list of items inside of a popover that is all inside an ng-repeat. I'm using angularjs as well as the ui-bootstrap package (http://angular-ui.github.io/bootstrap/).
HTML
<div ng-repeat='session in sessions'>
<p popover="{{session.items}}">view items</p>
</div>
This will show the array session.items for each session, which contains the information I want to show. However, this shows the brackets of the array as well.
Does anyone know a clean way to do this?
any help would be appreciated, thanks in advance
From ui-bootstrap site you can read
uib-popover - Takes text only and will escape any HTML provided for the popover body.
So if you provide session.items you will get string '[my array content]'. In my opinion you need to use uib-popover-template where your template would be like
<div ng-repeat='session in sessions'>
<p uib-popover-template="'urlToMyTemplateHere'">view items</p>
</div>
------ Template
<div ng-repeat="item in session.items" ng-bind="item"></div>
uib-popover-template takes an url to the template so you have to create file for it to be fetched or try this approach ( I don't really like it but just for testing )
<div ng-repeat='session in sessions'>
<p uib-popover-template="'iamabadapproachtemplate.html'">view items</p>
</div>
<script type="text/ng-template" id="iamabadapproachtemplate.html">
<div ng-repeat="item in session.items" ng-bind="item"></div>
</script>
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>