AngularJS - 有没有一种简单的方法可以在 "sibling"范围上设置变量？

Question

我遇到这个问题，我试图点击一个 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 都会关闭，除了单击的那个。

有什么想法吗？

Answer 1

@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 完成所有繁重的工作。