Menu
<div id="whole-div" ng-hide="hideme">
<div id="loop-div" ng-repeat="i in [1, 2, 3]">
<button ng-click="hideme=true">Button {{i}}</button>
</div>
</div>
Above is the code I have right now. I want it so that when you click one of the buttons made within the loop (Button1, Button2, Button3), the whole div is hidden. However, I found that I can only hide the whole div when the button is on the outside like follows...
<div id="whole-div" ng-hide="hideme">
<div id="loop-div" ng-repeat="i in [1, 2, 3]">
<button>Button {{i}}</button> </div>
<button ng-click="hideme=true">Final Button</button>
</div>
Is there a way to hide the whole div using one of the inner buttons in the loop div? Thanks in advance!
468
ng-repeat creates a local scope so that the variable hideme belongs to that local scope. There is in fact 3 variables hideme, each in a scope of a button.
Setting the property on the $parent scope should work and let the hideme variable be unique for the whole div:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
});<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.2.28/angular.js"></script>
</head>
<body ng-controller="MainCtrl">
<!-- here is the scope of MainCtrl, hideme can be used as is -->
<button ng-click="hideme=false">Show all</button>
<div id="whole-div" ng-hide="hideme">
<div id="loop-div" ng-repeat="i in [1, 2, 3]">
<!-- here is the scope of a button, hideme have to be prefix by $parent to access the right property -->
<button ng-click="$parent.hideme=true">Button {{i}}</button>
</div>
</div>
</body>
</html>Please check working example : http://plnkr.co/edit/Itb2UG0fPFtqsdduOlHr?p=preview
HTML:
<div id="whole-div" ng-hide="hideme">
<div id="loop-div" ng-repeat="i in [1, 2, 3]">
<button ng-click="hideOuterDiv()">Button {{i}}</button>
</div>
</div>
Controller:
$scope.hideOuterDiv = function() {
$scope.hideme = true;
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
