Sử dụng góc để ẩn toàn bộ div từ bên trong vòng lặp bên trong?

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

Ở trên là mã tôi có ngay bây giờ. Tôi muốn nó để khi bạn nhấp vào một trong các nút được thực hiện trong vòng lặp (Button1, Button2, Button3), toàn bộ div được ẩn. Tuy nhiên, tôi thấy rằng tôi chỉ có thể ẩn toàn bộ div khi nút là ở bên ngoài như sau ...Sử dụng góc để ẩn toàn bộ div từ bên trong vòng lặp bên trong?

<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ó cách nào để ẩn toàn bộ div sử dụng một trong các nút bên trong vòng lặp div? Cảm ơn trước!

Nguồn

2015-07-10 sleepycow

ng-repeat tạo ra một phạm vi địa phương để biến hideme thuộc mà phạm vi địa phương. Trên thực tế, có 3 biến số hideme, mỗi biến trong một phạm vi của một nút.

Thiết lập thuộc tính trên phạm vi mẹ $ nên làm việc và để cho các biến hideme là duy nhất cho toàn bộ 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>

Nguồn

2015-07-10 06:10:54

Vui lòng kiểm tra ví dụ làm việc: 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>

Bộ điều khiển:

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

Nguồn

2015-07-10 06:09:23 User2

Cố gắng,

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

Ngoài ra,

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

Nguồn

2015-07-10 06:12:30

tôi đề nghị bạn thay đổi $ phạm vi giá trị trên điều khiển

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

và trong kịch bản

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

Nguồn

2015-07-10 06:33:16 Rungsikorn

Sử dụng góc để ẩn toàn bộ div từ bên trong vòng lặp bên trong?

Trả lời

Các vấn đề liên quan