使用角度隐藏内部循环中的整个 div？
Posted
技术标签:
【中文标题】使用角度隐藏内部循环中的整个 div？【英文标题】：Using angular to hide a whole div from within an inner loop? 【发布时间】：2015-09-28 18:35:55 【问题描述】：<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>
上面是我现在拥有的代码。我想要它，以便当您单击循环中的一个按钮（Button1、Button2、Button3）时，整个 div 都被隐藏了。 但是，我发现只有当按钮在外面时，我才能隐藏整个 div，如下所示...
<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>
有没有办法使用循环 div 中的一个内部按钮来隐藏整个 div？提前致谢！
【问题讨论】：
【参考方案1】：我建议你更改控制器上的 $scope 值
<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>
在脚本中
app.controller('myCtrl',function($scope)
$scope.hide = function()$scope.hideme = true
)
【讨论】：
【参考方案2】：试试，
<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>
控制器，
$scope.hideme = false;
$scope.hideDivFunction= function()
$scope.hideme = !$scope.hideme; //in case toggle is required.
或者，
$scope.hideDivFunction= function()
angular.element( document.querySelector('#whole-div')).toggle();
【讨论】：
【参考方案3】：ng-repeat 创建一个本地范围，以便变量hideme 属于该本地范围。实际上有 3 个变量 hideme，每个变量都在一个按钮的范围内。
在 $parent 作用域上设置属性应该可以工作，并让 hideme 变量对整个 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>【讨论】：
【参考方案4】：请检查工作示例：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>
控制器：
$scope.hideOuterDiv = function()
$scope.hideme = true;
;
【讨论】：
以上是关于使用角度隐藏内部循环中的整个 div？的主要内容，如果未能解决你的问题，请参考以下文章
如果兄弟 div 中的行超过 n 行，则隐藏显示更多/更少 div