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>
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>
I want to make each test(ng-model) like test1, test2 unique in below code..
<div ng-repeat="item in Array">
<div>{{item.Name}}</div>
<a ng-click="openClose(test)>show/hide</a>
<div ng-show="test">{{item.Des}}</div>
</div>
$scope.openClose = function (modalName) {
$scope[modalName] = $scope[modalName] ? false : true;
}
You can maintain the show / hide using the $index value you get for each element when you use ng-repeat.
angular.module('app',[]).controller('mainCtrl', function($scope){
$scope.Array = [{Name:'abc'},{Name:'zzz'},{Name:'yyy'},{Name:'xxx'}];
$scope.openClose = function (index) {
if($scope.selectedValue == index){
$scope.selectedValue = -1;
}else{
$scope.selectedValue = index;
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainCtrl'>
<div ng-repeat="item in Array">
<div>{{item.Name}}</div>
<a ng-click="openClose($index)">show/hide</a>
<div ng-show='$index === selectedValue'>Hide Show content</div>
</div>
</div>
I need help with this code.
<ul ng-init="round = 'round'">
<li ng-repeat="mesa in mesas" ng-click="selected($index)">
<div id="{{round}}"> </div>
MESA {{mesa}}
</li>
</ul>
$scope.selected = function ($index){
$scope.index.round = 'round1';
}
I need that only the li that is being clicked to change the css name, but instead it change all of the li's that I have listed.
You're initializing the variable round outside of the repeat loop, so the expression {{round}} will always point to that singular, shared variable. If you update it once, it updates for all children of the ng-repeat.
If I understand your question, you're trying to change the CSS class for the div inside the repeat, correct? What you can do in that case is store the selected index on the controller's scope, and check that value against the index inside the loop
<ul>
<li ng-repeat="mesa in mesas" ng-click="select($index)">
<div class="round1" ng-if="selectedIndex === $index"> </div>
<div class="round" ng-if="selectedIndex !== $index"> </div>
MESA {{mesa}}
</li>
</ul>
$scope.select = function ($index){
$scope.selectedIndex = $index;
}
You could also use ng-class instead of ng-if depending on how your CSS is structured, but the idea is the same.
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<style type="text/css">
.round {
background: green;
}
.round1 {
background: blue;
}
</style>
</head>
<body ng-controller="controller">
<ul>
<li ng-repeat="mesa in mesas" ng-click="selected($index)" ng-class="[index[$index].round]">
<div id="{{ index[$index].id }}"> </div>
MESA {{ mesa }}
</li>
</ul>
</html>
<script type="text/javascript">
angular.module('app', [])
.controller('controller', controller);
controller.$inject = ['$scope'];
function controller($scope) {
$scope.mesas = ['1', '2', '3'];
$scope.index = [{
id: '1',
round: 'round'
}, {
id: '2',
round: 'round'
}, {
id: '3',
round: 'round'
}];
$scope.selected = function($index) {
$scope.index[$index].round = $scope.index[$index].round === 'round' ? 'round1' : 'round';
}
}
</script>
I think is what u looking for¿?
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
After originally setting my controller weddingPrice value a change caused by a function does not seem to change the variable. Its probably a simple error- can anyone help?
When sendWeddingQuoteInfo() is called it seems to send the original weddingPrice, not the one which has been updated when the return journey toggle has been checked.
What should happen is that the wedding price should be set at the start through the local setup function. Then if the return journey toggle is switched to on, the returnJourneyChange() should be fired, changing the global weddingPrice. When the Submit Quote button is pressed this should take the updated weddingPrice and send it to the next page. Currently this does not happen- no idea why.
//wedding.html
<ion-view view-title="Wedding Pax Num" can-swipe-back="true">
<ion-content ng-controller="WeddingPaxCtrl">
<div class="card">
<div class="item centerText" style="background-color: brown;">
<h2>CALCULATE WEDDING</h2>
</div>
</div>
<div class="padding20Top padding20Bottom">
<h2 class="centerText">Select number of Passengers</h2>
<input ng-model="passengerNo" class="col col-50 col-offset-25 quoteTFieldWithListItems" type="textfield">
<h6 class="centerText">PASSENGERS</h6>
</div>
<ion-toggle ng-model="returnJourney.checked" ng-change="returnJourneyChange()">Return Journey
</ion-toggle>
<ion-toggle ng-show="returnJourney.checked" ng-model="midnightReturn.checked" ng-change="midnightReturn()">Return Journey After Midnight</ion-toggle>
<div>
<h6 class="logText centerText"> {{ getCostBreakDown() }}</h6>
</div>
</ion-content>
<div class="endOfPageButton">
<a href="#/app/home/tester">
<button class="button button-full button-clear" ng-click="sendWeddingQuoteInfo()">Submit Quote</button>
</a>
</div>
</ion-view>
//controller.js
app.controller('WeddingPaxCtrl', function($scope, $stateParams, PassData, WhichQuote, CostOfMarriage, StoreQuoteData, WeddingData, DataThrow) {
var item = WeddingData.getWeddingDataObject();
$scope.passengerNo = 49;
$scope.returnJourney = { checked: false };
$scope.midnightReturn = { checked: false };
var weddingPrice;
$scope.returnJourney;
$scope.midnightReturn;
setup();
var sendInfo;
function setup() {
console.log("setup called");
weddingPrice = CostOfMarriage.getPrice(item[0], $scope.passengerNo, $scope.returnJourney.checked, $scope.midnightReturn.checked);
}
$scope.returnJourneyChange = function() {
console.log("return j called");
weddingPrice = 1000;
console.log("wedding price is now" + weddingPrice);
}
$scope.midnightReturn = function() {
}
$scope.getCostBreakDown = function() {
}
$scope.sendWeddingQuoteInfo = function() {
// var weddingPrice = $scope.weddingPrice;
console.log("WeddingPrice is " + weddingPrice + weddingPrice);
var sendInfo = ["Wedding Hire", item[0], $scope.passengerNo, "Extra", weddingPrice];
StoreQuoteData.setQuoteData(sendInfo);
WhichQuote.setInfoLabel("Wedding");
}
})
I think your ng-controller attribute is not at the right place. So the scope of your submit button is different.
I've moved the controller to ion-view element then the click is working as expected.
Please have a look at the demo below or here at jsfiddle.
(I've commented a lot of your code just to make the demo work.)
var app = angular.module('demoApp', ['ionic']);
app.controller('WeddingPaxCtrl', function($scope, $stateParams) { //, WeddingData, DataThrow) {
//var item = WeddingData.getWeddingDataObject();
$scope.passengerNo = 49;
$scope.returnJourney = {
checked: false
};
$scope.midnightReturn = {
checked: false
};
var weddingPrice;
$scope.returnJourney;
$scope.midnightReturn;
setup();
var sendInfo;
function setup() {
console.log("setup called");
weddingPrice = 100; //CostOfMarriage.getPrice(item[0], $scope.passengerNo, $scope.returnJourney.checked, $scope.midnightReturn.checked);
}
$scope.returnJourneyChange = function() {
console.log("return j called");
weddingPrice = 1000;
console.log("wedding price is now" + weddingPrice);
}
$scope.midnightReturn = function() {
}
$scope.getCostBreakDown = function() {
}
$scope.sendWeddingQuoteInfo = function() {
// var weddingPrice = $scope.weddingPrice;
console.log("WeddingPrice is " + weddingPrice + weddingPrice);
//var sendInfo = ["Wedding Hire", item[0], $scope.passengerNo, "Extra", weddingPrice];
//StoreQuoteData.setQuoteData(sendInfo);
//WhichQuote.setInfoLabel("Wedding");
}
})
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<ion-view ng-app="demoApp" view-title="Wedding Pax Num" can-swipe-back="true" ng-controller="WeddingPaxCtrl">
<ion-content>
<div class="card">
<div class="item centerText" style="background-color: brown;">
<h2>CALCULATE WEDDING</h2>
</div>
</div>
<div class="padding20Top padding20Bottom">
<h2 class="centerText">Select number of Passengers</h2>
<input ng-model="passengerNo" class="col col-50 col-offset-25 quoteTFieldWithListItems" type="textfield">
<h6 class="centerText">PASSENGERS</h6>
</div>
<ion-toggle ng-model="returnJourney.checked" ng-change="returnJourneyChange()">Return Journey
</ion-toggle>
<ion-toggle ng-show="returnJourney.checked" ng-model="midnightReturn.checked" ng-change="midnightReturn()">Return Journey After Midnight</ion-toggle>
<div>
<h6 class="logText centerText"> {{ getCostBreakDown() }}</h6>
</div>
</ion-content>
<div class="endOfPageButton">
<!---<a href="#/app/home/tester">-->
<button class="button button-full button-clear" ng-click="sendWeddingQuoteInfo()">Submit Quote</button>
<!--</a>-->
</div>
</ion-view>