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>
Related
I want to show a div according to a expression but the expression is stored in a variable in string form, is it possible to do evaluate an expression variable for ng-show / ng-hide.
like:
$scope.condition = {"SHOW":'(model1 === 'test1')'}
<div ng-show="condition['SHOW]"></div> something like this.
Try
CONTROLLER
$scope.test = 'test1';
$scope.condition = { show : ($scope.test === 'test1')};
VIEW
<div ng-show="condition.show">something like this.</div>
which is the same as
<div ng-show="condition['show']">something like this.</div>
TIP
Instead of using ng-show / ng-hide, try to use ng-if.
ng-if doesn't watch for changes on the binded variables inside this directive and can improve performance.
<div ng-if="condition['show']">something like this.</div>
Though it's already answered by other post, Just wanted to add..
Since In your question you said.. the expression is stored in a variable in string form, is it possible to do evaluate an expression variable ..
The simple answer is NO you can't evaluate angularjs expression string variable , but you can only evaluate the valid expression.(either by JS or by angular variable)
See this below code, to differentiate
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
myApp.controller('MyCtrl', function MyCtrl($scope) {
$scope.condition = {
SHOW1: "'test' == 'NOTEST'",
SHOW2: 'test' == 'test'
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-show="condition.SHOW1">
1.Not working, as it is simple string("'test' == 'NOTEST'").
</div>
<div ng-show="condition.SHOW2">
2.Working, valid boolean Angular variable
</div>
<div ng-show="'test'=='test'">
3.Working, valid boolean simple JS expression
</div>
</div>
:
I have an ng-repeat that acts like a switch condition that tells which template to render. I'm using ng-if inside the ng-repeat to achieve this. The problem? It's still evaluating the templates inside ng-if even if the condition evaluates to false which causes the entire thing to be slow.
<div ng-repeat="i in ...">
<div ng-if="i == 'something1'">
if this is false, do not evaluate this entire stuff
.... some complex template goes here
</div>
<div ng-if="i == 'something2'">
if this is false, do not evaluate this entire stuff
.... another complex template goes here
</div>
</div>
If the template inside each of the ng-if is complex and there are 20 ng-if inside ng-repeat and only one ng-if evaluates to true then 19 other templates will be wasting computing resources.
What can I possible do to mitigate this without resorting to programmatic approach and maintaining two-way binding for the template that is rendered?
ng-if removes items from the HTML if the condition is false, so some rendering & evaluation may take place before that happens. If you nest ng-include inside of ng-if, the templates you load via ng-include are never evaluated.
Something like this:
<body ng-app="app">
<div ng-controller="myController as ctrl">
<div ng-if=true>
Hi
<div>{{ctrl.log(true)}}</div>
</div>
<div ng-if=false>
Bye
<ng-include src="foo.html"></ng-include>
<div>{{ctrl.log(false)}}</div>
</div>
</div>
<script>
angular.module('app', []).controller("myController",myController);
function myController($scope){
var ctrl = this;
ctrl.log=function(val) {
console.log(val);
return val;
}
};
</script>
</body>
I try to create an Angular JS function that is displaying or hiding a Div in case that a certain requirement is met.
I do have the problem now that the function is not properly called and both divs are either visible or not visible (In the test case div 1 should be shown and div 2 not).
testApp.controller('MyController', ['$scope','$http',
function ($scope,$http) {
$scope.checkValue = function(value){
if(value >= 1)
return true;
else
return false;
};
}]);
In the html file I try to hide the Divs using the following parameters
<div class="classa" ng-hide="requestsExisting({{profile.arrayA.length}})">
<div class="classb" ng-hide="requestsExisting({{profile.arrayB.length}})">
Is during the run time the {{profile.parameterA.length}}passed to the function or the actual value that is stored in this variables? (It's 1 for arrayA and 0 for ArrayB)
you don't need the "{{" sign.
just do
<div class="classa" ng-hide="requestsExisting(profile.arrayA.length)">
<div class="classb" ng-hide="requestsExisting(profile.arrayB.length)">
the double curly brace is to put the value of the object in the html
The double curly brace notation {{ }} to bind expressions to elements
is built-in Angular markup
I think that it should work just with this code
<div class="classa" ng-hide="requestsExisting(profile.arrayA.length)">
<div class="classb" ng-hide="requestsExisting(profile.arrayB.length)">
I think that you don't need to use {{}} inside the ng-hide directive
this is an angular question, with ng-show and bindings.
I have 2 fields that I don't want to show at the same time. One is show when the "show" is true, and the other on when it's false.
I have a dropdown that changes this "show" value when certain option is selected.
But here's the thing, there is a very short moment when the two are showing at the same time, even though they shouldn't. How is it possible, and how to fix that ?
I figured out why it wasn't instantly hiding : there is a default transition animation of 0.5s. You need to override that into the CSS, precisely, it's on the classes ng-hide-add and ng-hide-remove.
Here is the simplest working example of what you're asking. It changes instantly. It's hard to say what would be causing a lag without more insight into your particular situation.
var module = angular.module('test', []);
function PageCtrl($scope) {
$scope.msg = 'Select hide/show example';
$scope.showFirst = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="PageCtrl">
<p>{{msg}}</p>
<select ng-model="showFirst">
<option ng-value="true">First</option>
<option ng-value="false">Second</option>
</select>
<p ng-show="showFirst">This is paragraph one</p>
<p ng-hide="showFirst">This is paragraph two</p>
</div>
What you want to do is use ng-hide with ng-show instead. Then use $scope.value set to true for both. Initially ng-hide will be hidden and ng-show will be shown then when you toggle to false for $scope.value it will flip in reverse. Basically don't use two ng-shows but you use a combination of both ng-hide and ng-show.
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