單擊並在angularJS中隱藏和顯示div

Question

我正在使用ng-repeat創建3個彈出窗口以開發一個過濾器。 我只想在Angular中做所有事情，每個彈出窗口都有相同的類名和不同的ID。 在每個按鈕上，單擊“我想顯示一個彈出窗口”，然后隱藏其他窗口。

我通過使用一個作用域變量得到了一個代碼，並且工作正常。 我想知道是否還有其他更好的方法可以做到這一點。

在jQuery中，我們可以用兩行代碼來做到這一點，但是我不知道如何在Angular中有效地做到這一點。

app.controller('MainCtrl', function($scope) {

    $scope.IsVisible = [false];

    $scope.mainList = [];
    var obj = {};
    obj.name = "swimlanes";
    obj.list = [];
    $scope.mainList.push(obj);
    obj = {};
    obj.name = "programs";
    obj.list = [];
    $scope.mainList.push(obj);
    obj = {};
    obj.name = "programs";
    obj.list = [];
    $scope.mainList.push(obj);


    //click event of rect trangle
    $scope.click = function(key, index) {
        var flag = $scope.IsVisible[index];
        $scope.IsVisible = [false];
        $scope.IsVisible[index] = !flag;
        $scope.myObj = {
            "top": key.currentTarget.offsetTop + "px",
            "left": key.currentTarget.clientWidth + 10 + "px"
        }
    }
});




   <div  ng-repeat="val in mainList" id={{val.name}} class="mainPopup" ng-    show="IsVisible[$index]" ng-style="myObj">

這可以正常工作，但我想知道是否還有更好的方法。

工作代碼

Answer 1

可以通過將$ scope.IsVisible替換為僅指向mainList中所選項目的變量來改進控制器。 然后，您無需維護布爾數組。

$scope.selected = null;

然后可以將$ scope.click更改為：

$scope.click = function(key, index) {
    $scope.selected = $scope.mainList[index];
    $scope.myObj = {
        "top": key.currentTarget.offsetTop + "px",
        "left": key.currentTarget.clientWidth + 10 + "px"
    }
};

另外，您將需要更新HTML以使用$ scope.selected來控制細節的可見性：

<div  ng-repeat="val in mainList" id={{val.name}} class="mainPopup" ng-show="val == selected" ng-style="myObj"></div>