我遇到这个问题,我试图点击一个 div 隐藏所有其他相同“种类”的 div。基本上我必须从子作用域中在所有其他“兄弟”作用域上设置变量。
为了说明这一点,我创建了以下内容:
HTML
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="model in models" ng-controller="MyChildCtrl">
<a ng-click="toggleVisibility()">toggle {{ model.name }} {{ visibility }}</a>
<div ng-show="visibility">
{{ model.name }}
</div>
</div>
</div>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
console.debug('scope');
$scope.models = [
{ name: 'Felipe', age: 30 },
{ name: 'Fernanda', age: 28 },
{ name: 'Anderson', age: 18 }
];
}
function MyChildCtrl($scope) {
$scope.visibility = false;
$scope.toggleVisibility = function() {
$scope.visibility = !$scope.visibility;
}
}
JSFiddle:http://jsfiddle.net/fcoury/sxAxh/4/
我希望每次显示其中一个 div 时,所有其他 div 都会关闭,除了单击的那个。
有什么想法吗?
最佳答案
@kolrie,当你的方法有效时,我会建议一个不同的解决方案,不需要对模型进行任何更改。基本思想是保留对所选项目的引用,并通过将当前项目(在 ng-repeat
内)与所选项目进行比较来计算可行性。
使用此解决方案,切换功能将变为:
$scope.toggleVisibility = function(model) {
$scope.selected = model;
};
计算可见性非常简单:
$scope.isVisible = function(model) {
return $scope.selected === model;
};
最后标记的相关部分修改如下:
<div ng-controller="MyCtrl">
<div ng-repeat="model in models">
<a ng-click="toggleVisibility(model)">toggle {{ model.name }} {{ isVisible(model) }}</a>
<div ng-show="isVisible(model)">
{{ model.name }}
</div>
</div>
</div>
这是一个完整的jsFiddle:http://jsfiddle.net/XfsPp/
在此解决方案中,您可以保持模型不变(如果您想轻松地保留它,这一点很重要),并让 AngularJS 完成所有繁重的工作。
关于AngularJS - 有没有一种简单的方法可以在 "sibling"范围上设置变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14078024/