Скрыть и показать div в angularJS по щелчку

Я создаю 3 всплывающих окна ng-repeatдля разработки одного фильтра. Я хочу делать все только в Angular, причем каждое всплывающее окно имеет одинаковое имя класса и другой идентификатор. На каждом нажатии кнопки я хочу показать одно всплывающее окно, и я хочу скрыть их.

Я получил один код, используя одну переменную области видимости, и работает нормально. Я хочу знать, есть ли другой лучший способ сделать это.

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

Это будет нормально работать, но я хочу знать, есть ли лучший способ.

рабочий код

javascript,html,css,angularjs,

0

Ответов: 1

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>
JavaScript, HTML, CSS, angularjs,
Похожие вопросы
Яндекс.Метрика