I have to hide a div on click .
<div ng-if="hideDiv">
<div>text text text text</div>
<a ng-click="hideMe(false)">Click Me To Hide</a>
</div>
Controller
this.hideMe = function(action){
$scope.hideDiv = action;
}
tested results are
console.log($scope.hideDiv) // Is false
{{hideDiv}} <!--Is false-->
But still ng-if doesn't hide div ?
Please, test the snippet below. I'm pretty sure your problem is due to some angularJS configuration failure
(function(){
angular.module("app", []).controller("testController", function($scope)
{
$scope.showDiv = true;
$scope.hideMe = function(IsVisible)
{
$scope.showDiv = IsVisible;
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="testController">
<div ng-if="showDiv">
<a ng-click="hideMe(false)">Click Me To Hide</a>
</div>
</div>
Related
So the thing is:
I have four cards and I have a ng-click on the first one with a function named OpenCard().
When I click, it shows its hidden content.
I wanna do the same for the rest of the cards, using the same call to OpenCard().
My four classes have the same name "rowCont" and the hidden content inside that "rowCont" is different:
<div class="rowCont" ng-click="OpenCard()" ng-class="{'active': isActive}">
<div class="hiddenContent">
<div class="animate-show" ng-show="cardVisible">
</div>
</div>
</div>
$scope.isActive = false;
$scope.OpenCard = function () {
if($scope.isActive == false) {
$scope.isActive = true;
$scope.cardVisible = true;
} else {
$scope.isActive = false;
$scope.cardVisible = false;
}
}
I'm using Angular 1.6.0
Do you have an idea how can I refer to one card in specific using the same function on ng-click? Cause when I click one in one closed card it shows the content of all cards.
<div class="row">
ng-repeat="x in current_tab
ng-class="{active1 : activeMenu === x}"
ng-click="setActive(x);"> {{x.userId}}
</div>
$scope.menuItems = $rootScope.current_tab;
$scope.activeMenu = $scope.menuItems[0];
$scope.setActive = function(menuItem) {
$scope.activeMenu = menuItem
}
var app = angular.module("ngClickApp", []);
app.controller('ngClickCtrl', ['$scope', function ($scope) {
$scope.cards = [{
isActive: false,
title: '1',
content: 'content 1'
}, {
isActive: false,
title: '2',
content: 'content 2'
}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ngClickApp">
<head>
<title>Validation messages</title>
</head>
<body ng-controller="ngClickCtrl">
<div class="rowCont" ng-repeat="card in cards track by $index" ng-click="card.isActive=!card.isActive" ng-class="{'active': c.isActive}">
card {{$index}}
<div class="hiddenContent">
<div class="animate-show" ng-show="card.isActive">
{{card.content}}
</div>
</div>
</div>
</body>
</html>
You can store card's visibility in an array ($scope.cardsVisible = [];), and pass an index in each call to OpenCard(cardIndex).
Then, display it conditionnaly in your view:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.cardsVisible = [];
$scope.OpenCard = function(cardIndex) {
$scope.cardsVisible[cardIndex] = true;
$scope.isActive = cardIndex;
}
}
.active {
background-color: red;
}
<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-click="OpenCard(1)" ng-class="{'active': isActive == 1}">
Card 1
<div ng-show="cardsVisible[1]">
This card is visible
</div>
</div>
<div ng-click="OpenCard(2)" ng-class="{'active': isActive == 2}">
Card 2
<div ng-show="cardsVisible[2]">
This card is visible
</div>
</div>
</div>
I have used 2 button in the form. I want to disable button1 on initialisation though I have given ng-disabled="true" but whenever user clicks on button2, button1 get enabled. Can anyone tell me how to do this in angularjs ?
You don't need to do anything in the controller if you are not working with the scope variable inside the controller.
So just do something like:
angular.module("app",[]).controller("ctrl",function($scope){})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button ng-disabled="first !== true"> one</button>
<button ng-click="first = true"> two</button>
</div>
You can call one function on click of second button and set the ng-disabled value to false.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.inactive= true;
$scope.enableButton1 = function() {
$scope.inactive= false;
}
});
<div ng-app="myApp" ng-controller="MyCtrl">
<br><input type="button" ng-disabled="inactive" value="button1"/>
<br><input type="button" ng-click="enableButton1()" value="button2"/>
</div>
use scope variables and assign them to ng-disabled
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.firstBtn = true;
$scope.secondBtn = false;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button ng-disabled="firstBtn" > one</button>
<button ng-disabled="secondBtn" ng-click="firstBtn = false"> two</button>
</div>
Its very simple as given below:
JS
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.isDisabled = true;
$scope.toggleButton = function() {
$scope.isDisabled = !$scope.isDisabled;
}
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl'>
<button ng-click='toggleButton()'>
Toggle
</button>
<button ng-disabled='isDisabled'>
I am button
</button>
</div>
</div>
Here is the jsfiddle link Jsfiddle demo
I need to switch between to div's. Div class="wrapper" must be visible by default. Div class="form" must be shown after admin approve. The problem is when i click on <a ng-click="toggle()"> it works only once, and no reaction after. If i will add some ng-hide to 'wrapper', ng-click works, but show/hide only 'form'. <a> must be shown after controller response, like class="form".
HTML:
<div class="body" ng-class="{'show': show && showTemp}">
<a ng-click="toggle()"></a>
<div class="form"></div>
<div class="wrapper"></div>
</div>
CSS:
.form {
display: none;
}
.wrapper {
display: block;
}
.show .form {
display: block;
}
.show .wrapper {
display: none;
}
Controller:
$scope.show = false;
$scope.showTemp = true;
// response from admin
$scope.$on('$show', function(e,data) {
$scope.show = true;
$scope.available = data;
});
// this click by user
$scope.toggle = function() {
$scope.showTemp = !$scope.showTemp;
};
Why can't you do something simpler like:
<div class="body" ng-init="showForm = false">
<a ng-click="showForm = available && ? false : !showForm">Click</a>
<div class="form" ng-show="showForm"></div>
<div class="wrapper" ng-hide="showForm"></div>
</div>
By using ngInit I'm setting a default value to showForm to false (You can do it from the controller as-well ($scope.showForm = false;) and then I toggle the ng-hide class (Which is found in angular.css any simply defined as .ng-hide {display: none;}) to show/hide the form and the wrapper DIVs.
When you click on the button the following condition is evaluated: showForm = available && ? false : !showForm - The showForm will always be hidden if there is no data available, and if there is data avalable, it will toggle between the form and the wrapper.
You can also add ng-show="available" to the button so it's only visible once there's data, because before it does nothing. A working example:
angular.module('app',[]).controller('ctrl', function($scope) {
$scope.setData = function(data) {
$scope.available = data;
$scope.showForm = true;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="body" ng-init="showForm = false">
<a ng-show="available" ng-click="showForm = !showForm">Click</a>
<br>
<div class="form" ng-show="showForm">THIS IS THE FORM<br>{{available | json}}</div>
<div class="wrapper" ng-hide="showForm">THIS IS THE WRAPPER</div>
<button ng-hide="available" ng-click="setData({val: 'test'})">SET MOCK DATA</button>
</div>
</div>
Issue is all my divs open on click.
I want only that div to open with its content which is clicked.
openBigDiv function is :
$scope.IsHidden = true;
$scope.openBigDiv = function {
$scope.IsHidden = $scope.IsHidden ? false : true;
}
I am calling function in div using ng-click.
You can use visibility flag array
HTML :
<div ng-app="testApp">
<div ng-controller="testController">
<div>
<button ng-click="showElem('elem1');">Show elem1</button>
<div ng-show="IsElemVisible('elem1')">elem1</div>
<button ng-click="showElem('elem2');">Show elem2</button>
<div ng-show="IsElemVisible('elem2')">elem2</div>
</div>
</div>
</div>
Or HTML if you want to use looping :
<div ng-app="testApp" ng-init="myElems=['elem1','elem2','elem3']">
<div ng-controller="testController">
<div ng-repeat="elem in myElems">
<button ng-click="showElem(elem);">Show {{elem}}</button>
<div ng-show="IsElemVisible(elem)">{{elem}}</div>
</div>
</div>
</div>
Javascript :
var app = angular.module('testApp', []);
app.controller('testController', function ($scope, $location, $rootScope, $log) {
$scope.hiddenElements = [];
$scope.IsElemVisible = function(elemId) {
return $scope.hiddenElements[elemId];
}
$scope.showElem = function (elemId) {
$scope.hiddenElements[elemId] = true;
}
});
Fiddle
I am using ng-show and ng-hide to show the banner for my page. When I am logged in I wanna show different banner than for logged out. So I have two div with ng-show and ng-hide whose value I am changing in the controller to true and false.
Html code:
First banner:
<div id="firstPageHeader" class="navbar navbar-inverse" role="navigation" ng-show={{display}}>
Second banner:
<div id="restPageHeader" class="navbar-header" ng-hide={{display}}>
Controller:
var LoginController = function($scope){
$scope.display = true;
$scope.loginUser = function(credentials){
console.log(credentials.username);
$scope.display = false;
}
$scope.logout = function(){
console.log('logout');
$scope.display = true;
}
So here according to login and logout the display value will change to true and false but its not happening the value remains only true.
So I want to know why the value is not getting changed even I used $scope.$apply()
ngShow and ngHide directives expect expressions. So it should be without curly braces {{ (which are used for expression interpolation):
ng-show="display"
Can you explain how you are using loginUser() and logout() , coz in my case it is working fine..
My index.html is :
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="switchcases"> <div ng-controller="LoginController">
<div ng-click="logout()">Hi</div>
<div ng-click="loginUser()">Bye</div>
<hr>
<div ng-show="display">Hi</div>
<div ng-hide="display">Bye</div>
</div>
</body>
</html>
and app.js is :
angular.module('switchcases',[])
.controller('LoginController',function($scope){
$scope.display = true;
$scope.loginUser = function(credentials){
//console.log(credentials.username);
$scope.display = false;
};
$scope.logout = function(){
//console.log('logout');
$scope.display = true;
};
});
Cases :: When I click Hi(the one above <hr> tag) , only the 'Hi' below <hr> tag is displayed and when i click Bye(the one above <hr> tag),only the 'Bye' below <hr> tag is displayed , as expected .
The default value displayed will be 'Hi' below the <hr> tag.
Just check once that if you are using loginUser() inside the scope of the controller.
You just need to replace braces in ng-hide and ng-show double quotes
<div id="restPageHeader" class="navbar-header" ng-hide="display">
I am login
<img src="https://marketplace.canva.com/MABY09l0-Tw/1/0/thumbnail_large/canva-outlined-lettering-border-tumblr-banner-MABY09l0-Tw.jpg" alt="">
</div>
<div id="restPageHeader" class="navbar-header" ng-show="display">
I am logout
<img src="https://img.clipartfest.com/08e6b6a7495aca9bbc478fcf662cd29b_welcome-hanging-banner-welcome-banner-clipart_935-311.jpeg" alt="">
</div>
this is controller
$scope.display = true;
$scope.loginUser = function () {
console.log('loginUser');
$scope.display = false;
}
$scope.logout = function () {
console.log('logout');
$scope.display = true;
}