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の1つを表示するたびに、クリックされたものを除いて、他のすべての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

OK、モデルに表示属性を追加しました。これを実行することができました。

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 に答える