我有这个问题,我试图点击一个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都会关闭,除了点击的那个。
有什么想法吗?
答案 0 :(得分:12)
@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完成所有繁重的工作。
答案 1 :(得分:1)
好的,我已经为模型添加了一个可见属性,我设法完成了这个:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
console.debug('scope');
$scope.models = [
{ name: 'Felipe', age: 30, visible: false },
{ name: 'Fernanda', age: 28, visible: false },
{ name: 'Anderson', age: 18, visible: false }
];
}
function MyChildCtrl($scope) {
$scope.toggleVisibility = function() {
angular.forEach($scope.models, function(model) {
model.visible = false;
});
$scope.model.visible = true;
}
}
住在这里:http://jsfiddle.net/fcoury/sxAxh/5/
这是最有效的方式吗?如果我在通过AJAX获取后将此可见属性注入模型数据中,您认为这是一个好习惯吗?