Question

所以我的问题是，如何在AngularJS中迭代数组时创建可扩展树。我的意思是我可以让它工作，他们一起扩展/关闭的问题。

我的HTML：

[...]
<div ng-repeat="item in items">
    <div class="item-title" ng-click="setState()">{{ item.title }}</div>
    <div class="item-container" show-me="isShown">
         {{ item.content }}
    </div>
</div>

我的js：

[...]
//in controller:

$scope.isshown = false;
$scope.setState = function() {
    $scope.isshown = !$scope.isshown;
};
[...]
.directive("showMe", function($animate) {
    return function (scope, element, attrs) {
        scope.$watch(attrs.showMe, function(newVal) {
            if(newVal) {
                $animate.addClass(element, 'show');             
            } else {
                $animate.removeClass(element,'show');
            }
        });
    };
});

所以这基本上打开了每个项目。我现在正在寻找一个解决方案3天，我真的不想用$（div＃blabla）-s制作特别长的jquery东西。有什么想法吗？

Answer 1

您可以修改指令以使用隔离范围：

.directive("showMe", function($animate) {
    return {
        scope: {},
        link: function (scope, element, attrs) {
            scope.showMe = false;
            scope.$watch('showMe', function(newVal) {
                if(newVal) {
                    $animate.addClass(element, 'show');             
                } else {
                    $animate.removeClass(element,'show');
                }
            });
        }
    };
});

- 编辑以回答以下评论中的问题 -

要从指令外部访问隔离范围，可以使用angular元素。使用JavaScript通过document.getElementById，document.getElementsByClassName，document.querySelector等获取节点。获得所需元素后，请执行以下操作。

var node = document.getElementById('MyElement');
var el = angular.element(node);
var scope = el.scope();
scope.showMe = false;

或者你可以创建一个监听器来控制它在你的指令中的值，如下所示：

.directive("showMe", function($animate) {
    return {
        scope: {},
        link: function (scope, element, attrs) {
            scope.showMe = false;

            element.bind('click', function(e) {
                e.preventDefault();
                scope.$apply(function() {
                    scope.showMe = !scope.showMe;
                });
            });

            scope.$watch('showMe', function(newVal) {
                if(newVal) {
                    $animate.addClass(element, 'show');             
                } else {
                    $animate.removeClass(element,'show');
                }
            });
        }
    };
});

Answer 2

你可以这样做：

<div ng-repeat="item in items">
    <div class="item-title" ng-click="item.isShown = !item.isShown">{{ item.title }}</div>
    <div class="item-container" ng-show="item.isShown">
         {{ item.content }}
    </div>
</div>

您不需要任何额外的javaScript代码。

Answer 3

范围在指令的所有实例中共享，因此每个showMe都会检查相同的isshown变量。一个简单的解决方案是修改你的代码：

<div ng-repeat="item in items">
    <div class="item-title" ng-click="setState(item)">{{ item.title }}</div>
    <div class="item-container" show-me="isShown(item)">
         {{ item.content }}
    </div>
</div>

在控制器中：

$scope.setState = function(item) {
    item.isshown = !item.isshown;
};
$scope.isShown = function(item) {
    return item.isshown;
};

在这里，您可以将项目用作数据源以及保持＆＃34; openness＆＃34;状态的对象。该指令的监视将调用控制器中的isShown函数，您可以在其中提取该项目的状态。可选地，你可以在其他地方使用一个存储每个显示项目的数组（当然也可以在hide上删除），而isShown只检查数组中是否包含该项目。

扩展隐藏元素

3 个答案: