Verwenden Sie eckig, um ein ganzes div innerhalb einer inneren Schleife zu verstecken?

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

Oben ist der Code, den ich gerade habe. Ich möchte es so, dass, wenn Sie auf eine der Schaltflächen innerhalb der Schleife (Button1, Button2, Button3) klicken, das ganze div ist ausgeblendet. Allerdings fand ich, dass ich nur die ganze div verstecken kann, wenn der Knopf auf der Außenseite ist wie folgt ...Verwenden Sie eckig, um ein ganzes div innerhalb einer inneren Schleife zu verstecken?

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

Gibt es eine Möglichkeit, die ganze div mit einem der inneren Tasten in der Schleife zu verstecken div? Danke im Voraus!

Quelle

2015-07-10 sleepycow

ng-repeat erzeugt einen lokalen Bereich, so dass die Variable hideme zu diesem lokalen Bereich gehört. Es gibt tatsächlich 3 Variablen hideme, jeweils in einem Bereich einer Schaltfläche.

Einstellen der Eigenschaft auf dem $ geordneten Bereich sollte funktionieren und lassen Sie die HideMe Variable für die gesamte div eindeutig sein:

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>

Quelle

2015-07-10 06:10:54

Bitte überprüfen Sie arbeiten Beispiel: 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; 
};

Quelle

2015-07-10 06:09:23 User2

Versuchen,

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

Alternativ

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

Quelle

2015-07-10 06:12:30

Ich schlage vor, Sie den Wert $ scope ändern

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

und in Skript

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

Quelle

2015-07-10 06:33:16 Rungsikorn

Verwenden Sie eckig, um ein ganzes div innerhalb einer inneren Schleife zu verstecken?

Antwort

Verwandte Themen