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>
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>
I'm rendering data in a table using Angular and ng-repeat. What I would like to do is add an if condition to say if the value contained in ng-repeat is a certain word, set the background colour of that row to red. I think it might look something like this, but I'm not sure how to do this in Angular.
if( {{field.value}} == THING){
var backgroundColour = red;
}
I was thinking of using ng-filter, although I dont wan't to actually filter the data, just set a variable based on a value.
Any ideas?
You could add an ng-class in the html to achieve this.
<div ng-repeat"field in fields" ng-class="{'with-background': field.value == THING}">
{{field.value}}
</div>
And then add with-background to css
.with-background {
background-color: red;
}
If THING is a variable pointing to some other value, you don't have to use quotes and if it's meant to be a string, use it as 'THING'
Here's the official documentation of ngClass: https://docs.angularjs.org/api/ng/directive/ngClass
You cann also use ng-style for this
<div ng-style="field.value == THING?{'background-color':'red'}:{}">
Hello Plunker!
</div>
plunker
You could do something like this below:
<div ng-repeat="field in collections"
ng-if="field.value && field.value =='THING'">
{{backgroundcolor}}
</div>
Or you could you use ng-class directive
<div id="wrap" ng-class="{true: 'yourClassName'}[field.value]">
You can use ng-class directive
<tr ng-class="{'color-red': item.value > 0}" ng-repeat="item in vm.items">
<td>{{ item.value }}>/td>
</tr>
I'm looking to change my background-image on buttons click.
I tried to use on my div: ng-init="select=1" ng-class="{'first-part': select == 1}" ng-class="{'sec-part': select == 2}"
and to check the varable to change the class but I can't using this variable out of the view.
My index code is like this :
<body ng-app="myApp">
<div ng-include="'views/header.html'"></div>
<div ng-view></div>
<div ng-include="'views/footer.html'"></div>
</body>
So my buttons are on the view and the css class to change on header.html.
Thanks guys for your help.
Nam's
Take a closer look at the documentation (and examples) of ngClass. You'll see:
<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
That means for you, you should try:
ng-class="{'first-part': select == 1, 'sec-part': select == 2}"
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}">
Why doesn't this work.
<li ng-if="!area"></li>
Feels a bit illogical since
<li ng-if="area"></li>
works just fine.
'area' is defined in scope as true/false
Any workarounds for this? I would prefer not to use ng-show/ng-hide since both of them renders items in DOM.
use this
ng-if="area == false"
OR
ng-if="area == true"
this may help someone
Use like this
<div ng-if="data.IsActive === 1">InActive</div>
<div ng-if="data.IsActive === 0">Active</div>
Just use for True:
<li ng-if="area"></li>
and for False:
<li ng-if="area === false"></li>
try this:
<div ng-if="$scope.length == 0" ? true : false></div>
and show or hide
<div ng-show="$scope.length == 0"></div>
else it will be hide
-----------------or--------------------------
if you are using $ctrl than code will be like this:
try this:
<div ng-if="$ctrl.length == 0" ? true : false></div>
and show or hide
<div ng-show="$ctrl.length == 0"></div>
else it will be hide
In angular 1, you can use ng-show and ng-hide.In your case, you would use ng-hide. For example:
<li ng-hide="area"></li>
you are not using the $scope
you must use $ctrl.area or $scope.area instead of area