Uso angolare per nascondere un'intera divisione all'interno di un ciclo interno?

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

Sopra è il codice che ho adesso. Lo voglio in modo che quando fai clic su uno dei pulsanti creati all'interno del loop (Button1, Button2, Button3), l'intero div è nascosto. Tuttavia, ho trovato che posso nascondere solo l'intera div quando il pulsante è sulla parte esterna come segue ...Uso angolare per nascondere un'intera divisione all'interno di un ciclo interno?

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

c'è un modo per nascondere l'intero div utilizzando uno dei pulsanti interni nel ciclo div? Grazie in anticipo!

fonte

2015-07-10 sleepycow

ng-repeat crea un ambito locale in modo che la variabile hideme appartiene a tale ambito locale. Vi sono infatti 3 variabili hideme, ciascuna nell'ambito di un pulsante.

impostazione della proprietà sulla portata genitore $ dovrebbe funzionare e lasciare che la variabile HideMe essere unico per tutta la 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>

fonte

2015-07-10 06:10:54

Si prega di verificare esempio funzionante: 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; 
};

fonte

2015-07-10 06:09:23 User2

prova,

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

In alternativa,

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

fonte

2015-07-10 06:12:30

ti suggerisco di cambiare il valore di portata $ sul 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>

e nello script

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

fonte

2015-07-10 06:33:16 Rungsikorn

Uso angolare per nascondere un'intera divisione all'interno di un ciclo interno?

risposta

Problemi correlati