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
Related
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>
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>
$scope.man="A"; //default text
<div ng-app="myApp" ng-controller="myCtrl">
<p>person clicked {{man}}</p>
<button ng-click="man('b')">B</button><br>
<button ng-click="man('c')">C</button>
</div>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.man="A";
$scope.man=function(value)
{
$scope.man=value;
}
});
i am new to angularjs i wanted to change text by arguments but text is not changing and the default text A is also not getting displayed can some one help me out with this
check this link
https://jsfiddle.net/nikhila/31gz56tn/
Your $scope variable and function are same. Change your function like this,
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<p>person clicked {{man}}</p>
<button ng-click="change('b')">B</button><br>
<button ng-click="change('c')">C</button>
</div>
Controller:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.man = "A";
$scope.change = function(value) {
$scope.man = value;
}
});
DEMO
the view in the index file is not updating. here are the code snippits.
index:
<body class="container" ng-controller="indexController">
<div ng-if="isLogin">
<div class="wrapper">
<div ng-include="src/partial/header.html"></div>
<div ng-include="src/partial/leftNavBar.html"></div>
<div ui-view></div>
<div ng-include="src/partial/footer.html"></div>
</div>
</div>
<div ng-if="!isLogin">
<div ui-view></div>
</div>
</body>
indexController:
.controller('indexController', indexController);
function IndexController(global, $scope){
function setupLogin(){
$scope.isLogin = global.getLogin();
};
$scope.$on('UPDATE_Login', setupLogin);
}
and my Login Controller:
.controller('Login', Login);
/* #ngInject */
function Login(auth, $location, global, $scope){
var vm = this;
vm.loginBtn = function login(credentials){
vm.dataLoading = true;
auth.loginService(credentials).then(function (result){
vm.dataLoading = false;
if(result.responseCode === '00'){
global.setLogin(true);
$scope.$broadcast('UPDATE_Login');
$location.path('/default');
}else {
vm.errorMessage = result.responseDescription;
}
});
}
}
the problem that i am facing is that when the scope from the login controller broadcast, it doesn't show and includes my partial header navigation and footer files.
am i missing something here ?
have you tried to to wrap setupLogin() in timeOut:
.controller('indexController', indexController);
function IndexController(global, $scope,$timeout){
function setupLogin(){
$timeout(()=>{
$scope.isLogin = global.getLogin();
},100);
};
$scope.$on('UPDATE_Login', setupLogin);
}
sometimes it helps with problems like this
goodluck
My view is:
<div class="container" ng-controller="MyController">
<div class="row">
<div class="col-md-8">
<textarea class="form-control" rows="10" ng-model="myWords" ng-change="parseLanguage()"></textarea>
</div>
<div class="col-md-4" ng-show="sourceLanguage !== null">
Language: {{ sourceLanguage }}
</div>
</div>
</div>
My controller is:
webApp.controller('MyController', [
'$scope', '$rootScope', 'TranslateService', function($scope, $rootScope, CodeService) {
$scope.init = function() {
return $scope.sourceLanguage = null;
};
$scope.parseLanguage = function() {
return TranslateService.detectLanguage($scope.myWords).then(function(response) {
console.log($scope.sourceLanguage);
$scope.sourceLanguage = response.data.sourceLanguage;
return console.log($scope.sourceLanguage);
});
};
return $scope.init();
}
]);
The console logs show the right data. But in the view, sourceLanguage never updates. Why would this be?
In case the promise you are evaluating is not part of the Angular context you need to use $scope.$apply:
$scope.parseLanguage = function() {
TranslateService.detectLanguage($scope.myWords).then(function(response) {
$scope.$apply(function() {
$scope.sourceLanguage = response.data.sourceLanguage;
});
});
};