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
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 am using angular material 1 and want to hide sidenave when window size not satisfy "gt-sm". Below is the controller code.
.controller('mainpageController',mainpageAction);
function mainpageAction($scope,$mdMedia,$window){
//state variable for mainpage.
$scope.sideNavVisibility = $mdMedia('gt-sm');
/* function definition for mainpage; bind this function using ng-click when user click on side menu */
$scope.showSideNav = function(defaultDisplay){
$scope.sideNavVisibility = true;
};
angular.element($window).bind('resize', function(){
console.log($mdMedia('gt-sm'));
$scope.$apply(function() {
$scope.sideNavVisibility = $mdMedia('gt-sm');
});
});
}
Below is the HTML template where I am using it.
<body md-theme="mainpage" ng-controller="mainpageController">
<div layout="row" layout-fill="true">
<md-sidenav class="md-sidenav-left" md-is-locked-open="{{sideNavVisibility}}" flex="none">
In console I am getting the correct value. When screen side is greate than 960px it is logging "true" value else "false". But still the change is not getting applied to view.
Here basically I want to show sidenav if screen size is more than 960px i.e. "gt-sm" or when not greater than "gt-sm" then when user click on side menu icon.
Remove the double curly brackets {{ }} from the expression furnished to the md-is-locked-open attribute:
<body md-theme="mainpage" ng-controller="mainpageController">
<div layout="row" layout-fill="true">
<md-sidenav class="md-sidenav-left"
<!-- REMOVE double curly brackets
md-is-locked-open="{{sideNavVisibility}}"
-->
md-is-locked-open="sideNavVisibility"
flex="none">
Double curly brackets converts the boolean value false to the string "false". In JavaScript the string "false" is truthy instead of falsy. In fact any string with a length greater than zero is truthy. This is one of the quirks of JavaScript.
For more information, see MDN JavaScript Reference - falsy
To show/hide an element based on a condition in Angular you can simply use ng-show or ng-hide.
<md-sidenav ng-show="sideNavVisibility" class="md-sidenav-left" flex="none">
I am trying to implement some directive, which will be based on the value of one variable in other Service. Here is my code:
if (this.SomeService.variable.condition){
element.show();
} else {
element.hide();
};
However, it is called only once, when the page is bootstraped. How can I make it so that if the variable changes, the element shows/hides? Is there any way to do it without watcher?
You can use ng-show / ng-hide that are angularjs construct used to hide or show a particular piece of HTML.
For example:
<div ng-show="true">HELLO I AM THE FIRST DIV</div>
<div ng-hide="true">HELLO I AM THE SECOND DIV</div>
will return something like
HELLO I AM THE FIRST DIV
Inside ng-show you can put watherver kind of variable so then if your javascript is something like this:
angular.module('mymodule').controller('MyCtrl',[function(){
var self = this;
self.isVisible = true;
}]);
you can use that variable in your code:
<div class="container" ng-controller="MyCtrl as c">
<div ng-show="c.isVisible">HELLO I AM THE FIRST DIV</div>
<div ng-hide="c.isVisible">HELLO I AM THE SECOND DIV</div>
</div>
And the result is the same
Can a simple directive be used to apply styles to form fields when they are $error and !$pristine?
For example, instead of writing a lengthy:
<div
ng-class="{'has-error':(myform.myField.$error && !myform.myField.$pristine) === true}">
<!-- myField is inside the div -->
Can I just write something like:
<div err-pris-cls="'has-error', myField">
Are directives the answer for this?
Rather than creating a new directive which will basically add class or remove it, I'd use ng-class directive itself, but will move code from html to controller which will also make sense to have testable code. That isValid controller function can be easily testable.
Markup
<div ng-class="{'has-error': isValid(myform.myField)">
Code
$scope.isValid = function(field){
return (field.$error && !field.$pristine) === true;
}
I am inexperienced with angular.
I am using angular to create a series of nested divs (a form) on a webpage. The top div has ng-controller="controllername" as an attribute. Within the nested divs is a div with ng-show="showvar" as an attribute.
It looks like this.
<div class="page">
<div ng-controller="controllername">
<div ng-show="showvar">Hidden Stuff</div>
</div>
</div>
When I perform functions on showvar to make it true, the div appears (and disappears when false) as intended.
I also have a completely separate div 'outside' the the original nest of divs with the ng-controller attribute. As such, there is no ng-controller attribute in this seperate hierarchy BUT I have nested another div inside with the ng-show="showvar" attribute.
Updated HTML structure is as such
<div class="page">
<div ng-controller="controllername">
<div ng-show="showvar">Hidden Stuff</div>
</div>
<div class="seperate">
<div ng-show="showvar">More Hidden Stuff</div>
</div>
</div>
When the page loads, both divs with ng-show="showvar" in the separate nests are hidden as ng-hide has been appended by angular. When I perform functions on showvar after the page load to make it true, only the div within the ng-controller div gets shown.
I (think I) understand this is because the ng elements are evaluated at page load (and appended with ng-hide, even outside the controller?) but only the ng elements within the div with the ng-controller attribute are evaluated when functions are performed after page load. Is this correct?
How can I get the other ng-show to be evaluate 'outside' of the ng-controller div?
I was thinking one option is to append ng-controller to the overall 'page' div instead of the nested div. But what other options do I have?
EDIT: I also tried simply adding ng-controller="controllername" to the separate div. I guess angular 'ignores' the duplicate ng-controller div?
The problem your facing is that the showvar resides in your controller's scope, your second usage of the showvar is not within that scope.
What you need to do is make sure the variable is available where needed.
Say you add the variable to the parentController (you don't have one in your example so I'll add one)
<div class="page" ng-controller="parentController">
<div ng-controller="controllername">
<div ng-show="showvar">Hidden Stuff</div>
</div>
<div class="seperate">
<div ng-show="showvar">More Hidden Stuff</div>
</div>
</div>
app.controller('ParentController', function($scope){
$scope.showvar = false;
});
problem with this is when you set showvar to true within your controllername controller it will set it in the innerscope and not the outer. When making sure you have the right scope by accessing it through another object you should be safe.
So try it like this:
<div class="page" ng-controller="parentController">
<div ng-controller="controllername">
<div ng-show="obj.showvar">Hidden Stuff</div>
</div>
<div class="seperate">
<div ng-show="obj.showvar">More Hidden Stuff</div>
</div>
</div>
app.controller('ParentController', function($scope){
$scope.obj = {
showvar: false
}
});
Quick demo
Your issue here is that you ended with 2 "showvar" variables: one within the "controllername" scope and another one on the app scope (as you have a ng-app declaration somewhere in your html parent of the "page" div).
When you load your page, you get the value of "showvar" in the controller scope for the first div, and for the "separate" one, you get the "showvar" variable in the app scope, which doesn't exist, therefore it is resolved to "false" (even though angular declares it for you in your app scope and you can even modify its value later).
When you change the value of "showvar" in the controller scope, it doesn't change the one in the app scope, making the "separate" div stay hidden forever =)