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

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完成所有繁重的任务.