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
Related
What i'm trying to do is similiar to an accordion.
Simple put
i have an ng-repeat with an <a> tag that once clicked show another div called "Printpanel" nested inside it within ng-show.
If the user cick to another <a> tag, i want to hide all other div showed before, and open only to that one related.
I am using $index to trigger the specific div.
Here what i have done:
<div ng-repeat="product in $ctrl.Products">
<a href="#" ng-click="showDetails = $index;>CONFIGURE</a>
<div class="Printpanel ng-hide" ng-show="showDetails == $index" ng-hide="showDetails != $index">
</div>
it seems that ng-hide is not recognized... Anybody have an idea?
You don't need to use ngShow + ngHide: one is enough.
<div class="Printpanel ng-hide" ng-show="showDetails == $index">
You can use ng-if also:
<div class="Printpanel" ng-if="showDetails == $index">
EDIT:
due to scope inheritance problem, you are not able to set showDetails variable. use $parent for that.
working example:
<div ng-repeat="product in $ctrl.Products">
CONFIGURE
<div class="Printpanel" ng-if="$parent.showDetails == $index"> </div>
</div>
seems you have missed closing double quotes here ng-click="showDetails = $index;
Also either of one you need to use ng-show/ng-hide/ng-if = expression
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>
For example, I want to show the element if $scope.test === 'hi". How do I achieve this?
I tried this:
<div ng-if = " {{test}} == 'hi' ? true : false ">
Show this if $scope.test is equal to 'hi'
</div>
Example here doesn't seem to work. My fail plunker.
You don't need a ternary for that since ng-if expects a boolean. This will do:
<div ng-if = "test == 'hi'">
Show this if $scope.test is equal to 'hi'
</div>
You can still use ternaries if you wish, you just don't need to interpolate the variable: test == 'hi' ? true : false
The issue is with your really old Angular version. See it working with 1.3: http://plnkr.co/edit/cKZkOe1O4EBiIWeirlZ2?p=preview
Um. You don't use {{}} in the ng-if.
<div ng-if = " test == 'hi'">
Show this if $scope.test is equal to 'hi'
</div>
Above works
EDIT
This is failing in your plunker because
The ng-if directive was provided after angular 1.1.5, you are using 1.0.5.
Working version
http://plnkr.co/edit/3XHe1Ngw1Ntv5FCTBJwA
You don't need ternary expressions here, just use ng-show.
<div ng-show="test"></div>
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}">
I need to show and hide a div. I do it by putting true of false values into the ng-show
<div class="drawingToolPropertie" ng-show="{{ drawingMods.settingRoof}}">
<div class="drawingToolPropertie" ng-show="{{ drawingMods.settingObs}}">
But this is what i get:
<div id="roofPropertie" class="drawingToolPropertie ng-hide" ng-hide="true">
<div id="ObstaclePropertie" class="drawingToolPropertie ng-hide" ng-hide="false">
values chage but that ng-hide class stays and as result those divs are always hidden. How do i fix this ? Why is this working like this ? I'm not using jquery.
ng-show/ng-hide uses no double brackets
ng-show="drawingMods.settingRoof"