I am developing a filter that requires me to create 3 popups using the ng-repeat directive in Angular. Each popup should have the same class name but a different id. When a button is clicked, I want one popup to show while the rest hide.
I currently have a working code using a single scope variable, but I'm wondering if there is a better way to achieve this. In jQuery, it only takes 2 lines of code to accomplish this, but I'm unsure of the most efficient method in 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">
The current code works well, but I am seeking a more optimal approach. If you have any suggestions or improvements, please let me know.