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

可以通过将$ scope.IsVisible替换为仅指向mainList中所选项的变量来改进控制器。然后，您不需要维护一组布尔值。

getUserTasks

然后可以将 $ scope.click更改为：

$scope.selected = null;

此外，您需要更新HTML以使用$ scope.selected来控制详细信息的可见性：

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

单击时在angularJS中隐藏并显示div

1 个答案: