Verstecken und Zeigen div in angularJS auf Klick

Question

Ich erstelle 3 Popups mit ng-repeat für die Entwicklung eines Filters. Ich möchte alles nur in Angular machen, wobei jedes Popup denselben Klassennamen und eine andere ID hat. Bei jedem Klick klicke ich auf ein Popup und ich möchte den Rest ausblenden.

Ich habe einen Code mit einer Scope-Variablen und es funktioniert gut. Ich möchte wissen, ob es noch einen anderen besseren Weg gibt, dies zu tun.

In jQuery können wir dies mit 2 Zeilen Code, aber ich weiß nicht, wie dies effizient in Angular tun.

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

Das wird gut funktionieren, aber ich möchte wissen, ob es einen besseren Weg gibt.

working code

Answer 1

Der Controller kann durch Ersetzen des $ scope.IsVisible mit einer Variablen verbessert werden, die einfach auf das ausgewählte Element weist in Mainlist. Sie müssen dann kein Boolesches Array verwalten.

$scope.selected = null; 

$ scope.click kann dann geändert werden:

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

Darüber hinaus müssen Sie Ihre HTML aktualisieren, um die $ zu verwenden scope.selected die Sichtbarkeit der Details zu kontrollieren:

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