Użycie kątowe, aby ukryć cały dział z wewnętrznej pętli?

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

Powyżej znajduje się kod, który mam teraz. Chcę, aby po kliknięciu jednego z przycisków w pętli (Button1, Button2, Button3) cały div został ukryty. Uważam jednak, że mogę ukryć tylko cały div, gdy przycisk znajduje się na zewnątrz jak następuje ...Użycie kątowe, aby ukryć cały dział z wewnętrznej pętli?

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

Czy istnieje sposób, aby ukryć cały div przy użyciu jednej z wewnętrznych przycisków w pętli div? Z góry dziękuję!

Źródło

2015-07-10 sleepycow

ng-repeat tworzy zakres lokalny tak, że zmienna hideme należy do tego zakresu lokalnego. W rzeczywistości są 3 zmienne hideme, każda w zasięgu przycisku.

Ustawienie właściwości w zakresie dominującej $ powinien pracować i niech zmienna hideme być unikalny dla całego 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>

Źródło

2015-07-10 06:10:54

Proszę sprawdzić pracy przykład: 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>

Kontroler:

$scope.hideOuterDiv = function() { 
    $scope.hideme = true; 
};

Źródło

2015-07-10 06:09:23 User2

spróbować

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

Alternatywnie

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

Źródło

2015-07-10 06:12:30

proponuję zmienić wartość zakresu $ na kontrolerze

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

aw skrypcie

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

Źródło

2015-07-10 06:33:16 Rungsikorn

Użycie kątowe, aby ukryć cały dział z wewnętrznej pętli?

Odpowiedz

Powiązane problemy