單擊隱藏並顯示angularJS中的div

Question

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

我有一個代碼通過使用一個範圍變量，它工作正常。我想知道是否有其他更好的方法來做到這一點。

在jQuery中，我們可以用2行代碼來做到這一點，但我不知道如何在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"> 

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

working code

Answer 1

控制器可以通過用僅指向在mainList所選擇的項目的可變取代$ scope.IsVisible得到改善。然後你不需要維護一組布爾值。然後

$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>