I have following directive like "pulsate" with restrict option class. I need to write condition like as below.
<div class="{pulsate : $index === 2}">
I tried this but its not working fine. So please help any one.
You need to use ng-class directive in order to achieve the solution.
<div ng-class="{pulsate : $index === 2}">
Use single commas around your class name like so:
<div ng-class="{'pulsate' : $index === 2}">
Related
Is there a way to determine which attribute to render on an element? For example, say I wanted to style a div to have a green background if my count variable is greater than 5, but give it a ui-view directive otherwise?
Let's take an unrealistic example written in pseudocode
<div ng-if="count > 5 ? {style='background: green'} : {ui-view='home'}">
</div>
Is this plausible? I may be approaching it the wrong way but I wanted to know if this could or should be done (I'm thinking custom directives could help but I wanted to keep this as lightweight as possible)
Any help or discussion is appreciated!
You can simply do:
<div ng-if="myCondition"></div>
<div ng-if="!myCondition" ui-view></div>
In order to avoid code duplication I suggest to use ng-include:
<ng-include src="template"></ng-include>
Yes it is, ng-class is made for that
<div ng-class="{{ 'green' : (count > 5) ; 'red' : (count != 5) }}">
</div>
// where green and red is class name not style
You can also use a variable for the class name
<div class="base-class" ng-class="myVar">Sample Text</div>
or ng-style
http://plnkr.co/edit/pCplLBymY1nmX7Bmb0uO?p=preview
<span ng-style=" count > 5 ? { 'background-color':'red' } : { 'background-color':'green' }" >Sample Text</span>
<div id="parent" ng-class="{testClass:???}">
<span id="child" class="test"/>
</div>
On this example, how would I do it so that if element child would have a class test, the parent element would dynamically have the class testClass?
You can create a scope variable to validate whether those 2 elements should be visible or not.
The inner span too should be getting set dynamically according to your description. So you can use ng-class for that too.
So the code can be like this :
<div id="parent" ng-class="{testClass : isValid}">
<span id="child" ng-class="{test : isValid}"/>
</div>
You can add the ternary condition within the ng-class like
var var-test = 'hi'=='bye'
ng-class=" var-test ? 'class-if-true' : 'class-if-false'">
and put in your css file the classes
.class-if-true{color=black}
.class-if-false{color=white}
I am trying to use AngularJS Expressions in tag as below
class="({{product.id}} > 2) ? 'act':''"
after execution which can be this
class="( 5 > 2) ? 'act':' ' "
will it be possible that it cloud be like
class='act'
if yes then how ?
I have tried above code but not getting
class='act'
same for ng-hide
You can use ng-class instead of class :
ng-class="{'act': product.id > 2}"
Have a look at the doc for more samples :
https://docs.angularjs.org/api/ng/directive/ngClass
This may help someone
replace class to ng-class
as below
ng-class="{'act': product.id > 2}"
replace ng-hide to ng-if
as below
ng-if="selectedItem == product.pageID"
so you can skip records
Use the ng-class attribute:
ng-class="{'act': product.id > 2}"
That should work for you.
https://docs.angularjs.org/api/ng/directive/ngClass
Check this one may help you :
.one{
color:red;
}
.two{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app ng-init="num=2">
<p ng-class="{'two': num==2}">Hello</p>
</div>
My code looks like this:
<div id="message-area">
<div ng-cloak>{{ message.text }}</div>
</div>
Can someone tell me how I can give the inside div a class of error if the app.state.text ends in a !
Ideally I am hoping for a solution where it's all self-contained inside the HTML and not having to have a function I call in the $scope if that's possible.
Use ng-class and call a function on your controller that does the check:
$scope.getClass = function(text) {
return text.slice(-1) === '!' ? 'error':'';
}
Fiddle
Update:
<div ng-class="(message.text.slice(-1) === '!' ? 'error':'')">{{message.text}}</div>
I am having the next problem. As you can see in my jsFiddle I am trying to use ng-bind-html-unsafe inside a template in my directive, and the attribute's value that I'm passing item{{itemColumn.field}} depends because is inside an ng-repeat. The thing is that I am using the ng-bind-html-unsafe in the columns that the attribute highlight is true, because the idea is to filter data (using the text input) and highlight the selection introduced by the user in the input. And as you can see, there is no value in those columns (because it seems that the binding is not working for some reason).
I have read about possible solutions and it one guy said that it can be fixed using $compile (which I'm actually using), so I have some time stuck in this with no idea on how to solve it.
Someone has faced something like this before? and can give me some ideas on how to solve the problem?
EDIT:
As Joachim suggests, I will provide more relevant code. In my template I have this
<td ng-repeat=\"itemColumn in gridOptions.gridColumnDefs \"
ng-show=\"itemColumn.visible | elementIsDefined : itemColumn.visible : true\" >
<div ng-switch on=\"itemColumn.highlight\"> " +
<span ng-switch-when=\"true\">
<div ng-bind-html-unsafe=\"item.{{itemColumn.field}} | highlight: {{gridOptions.searchInput}}\" ></div>
</span>
<span ng-switch-when=\"false\">{{item[itemColumn.field]}}</span>
</div>
</td>
I think my problem is related to the fact that I am trying to use a binding {{ }} inside the ng-bind-html-unsafe directive (Which i need). When the page renders, I got my div with the attributes as stated in the template, but the ng-bind-html-unsafe does not renders any HTML.
Just in case you need it, i found a way to make my issue disappear. In the link function inside my directive, I added the next functions:
scope.getValueToBind = function (item, subItem) {
return item[subItem];
};
scope.getFieldToFilter = function () {
var inputValue = scope.gridOptions.searchInput;
var returnValue = $("input[ng-model='" + inputValue + "']").val();
return returnValue;
};
And in my template I call this new functions instead of having a direct binding in the ng-bind-html-unsafe (which does not work at all with internal bindings). The functions return the values that I needed (as If i had a binding)
<td ng-repeat=\"itemColumn in gridOptions.gridColumnDefs \"
ng-show=\"itemColumn.visible | elementIsDefined : itemColumn.visible : true\" >
<div ng-switch on=\"itemColumn.highlight\">
<span ng-switch-when=\"true\"><div ng-bind-html-unsafe=\"getValueToBind(item,itemColumn.field) | highlight: getFieldToFilter()\" ></div>
</span>
<span ng-switch-when=\"false\">{{item[itemColumn.field]}}</span>
</div>
</td>
Here you can find the complete jsFiddle. If you type any letter/word that is inside the table, it will be highlighted.