Using angular to hide a whole div from within an inner loop?

Asked 10/7, 2015 at 6:2 Answered 10/7, 2015 at 6:33

Solved javascript jquery angularjs angularjs-ng-repeat ng-show

<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!

Fornof answered 10/7, 2015 at 6:2 Comment(0)

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>

Dirigible answered 10/7, 2015 at 6:10 Comment(0)

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;
};

Telugu answered 10/7, 2015 at 6:9 Comment(0)

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>

Dirigible answered 10/7, 2015 at 6:10 Comment(0)

Try,

<div id="whole-div" ng-hide="hideme">
  <div id="loop-div" ng-repeat="i in [1, 2, 3]">
    <button ng-click="hideDivFunction();">Button {{i}}</button> 
  </div>
</div>

Controller,

$scope.hideme = false;
$scope.hideDivFunction= function(){
    $scope.hideme = !$scope.hideme; //in case toggle is required.
}

Alternatively,

$scope.hideDivFunction= function(){
angular.element( document.querySelector('#whole-div')).toggle();
    }

Schizopod answered 10/7, 2015 at 6:12 Comment(0)

i suggest you change the $scope value on Controller

<div id="whole-div" ng-hide="hideme" ng-controller="myCtrl">
  <div id="loop-div" ng-repeat="i in [1, 2, 3]" >
    <button ng-click="hide()">Button {{i}}</button> 
  </div>
</div>

and in script

app.controller('myCtrl',function($scope){
  $scope.hide = function(){$scope.hideme = true}
})

Yarrow answered 10/7, 2015 at 6:33 Comment(0)

Recommended topics

Hot tags