4

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

有任何想法吗？

4

2 回答 2

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

于 2012-12-29T11:55:37.097 回答
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 获取模型数据后将此可见属性注入到模型数据中，您认为这是一个好习惯吗？

于 2012-12-29T01:59:26.327 回答