クリックするとangularJSのdivを非表示にします

Question

私はng-repeatを使用して3つのポップアップを作成し、1つのフィルタを開発しています。すべてのポップアップが同じクラス名と異なるIDを持つAngularのみですべてをやりたい各ボタンで、ポップアップを1つ表示したいと思うので、残りの部分を隠したいと思う。

1つのスコープ変数を使用して1つのコードを取得しましたが、正常に動作しています。私はこれを行うための他のよりよい方法があるかどうかを知りたい。

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.selected $を使用するようにHTMLを更新する必要がありますまた

$scope.click = function(key, index) { 
    $scope.selected = $scope.mainList[index]; 
    $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="val == selected" ng-style="myObj"></div>