Question

我在Angular中构建此应用程序，其中通过以下html使用ng-repeat形成div表：

的 HTML

<div ng-repeat="(key, value) in data.data.ipv4">
    <div class="cellbody">{{value.descr}}</div>
    <div class="cellbody">{{value.protocol}}</div>
    <div class="cellbody">{{value.internip}}</div>
    <div class="cellbody">{{value.internrange}}</div>
    <div class="cellbody">{{value.externrange}}</div>
    <div class="deletecell">
        <span class="toggledelete"  ng-click="deleteport($event, key, 4)">
            <i class="icon-minus negativehover"></i>
        </span>
        <span class="toggledelete" style="display:none">
            <span>PORT DELETED</span>
            <span class="deletedportundo" ng-click="restoreport($event, $index, 4)">
                UNDO
            </span>
        </span>
    </div>
</div>

每行的最后一个div有一个可见的可点击按钮，它通过deleteport（）函数向服务器发送一个删除命令，然后，如果一切正常，则启动一个动画，其中整个单元格被隐藏，之前隐藏的类别＆＃39; deletedportundo＆＃39;出现了。

无论如何，事情是我的控制器看起来像这样：

Angular Javascript控制器

$scope.deleteport = function(e,f) {
    postData.index = f;
    $http.post('serverside/router.php', postData)
        .success(function(data, status, headers, config){
            if (data.status == 'ok') {
                var elem = angular.element(e.target);
                $(elem).parent().parent().parent().children('.cellbody').hide('fast');
                $(elem).parent().parent().children('.toggledelete').toggle();
                $(elem).parent().parent().parent().children('.deletecell').animate({
                width: "100%"
                }, 300 );
                $(elem).parent().parent().parent().children('.deletecell').addClass('macdeleted');
            }
    });
}

除了我知道我不应该操纵控制器中的DOM之外，其他视觉上的工作方式如预期的那样;我试图将其整合到一个指令中是不成功的，但因为每一行都独立于其他行，所以我无法达到预期的效果。

Answer 1

Daniel，

在控制器中操作DOM没有任何问题。但是，我可以建议一种更简单的方法，而不是使用那些讨厌的parent（）。parent（）。parent（）。parent（）。parent（）... calls :)。

只需在toggledelete div中添加ng-show，而不只是在控制器中执行$scope.portDeleted = false。这也适用于.cellbody标记。

对于.deletecell类，您可以使用ng-class，只需执行$scope.deletecell = some_value。

<div ng-class="{deletecell:deletecell}">
    <span class="toggledelete"  ng-click="deleteport($event, key, 4)">
        <i class="icon-minus negativehover"></i>
    </span>
    <span class="toggledelete" style="display:none">
        <span>PORT DELETED</span>
        <span class="deletedportundo" ng-click="restoreport($event, $index, 4)">
            UNDO
        </span>
    </span>
</div>

对于动画，您可以使用ngAnimate（http://www.nganimate.org/）

通过ng-repeat内的指令为行设置动画

1 个答案: