Question

我在Angular上编写树编辑器。工作原理：

有＆＃34;来源＆＃34;具有树结构的对象，嵌套对象（$scope.root_item）;
要显示树，我将其展平，根据＆＃34; source＆＃34;创建项目列表。树结构和ng-repeat列出（$scope.flatten_tree2函数）。

大多数操作都可以正常工作 - 如果你添加，删除，向上或向下移动项目，那么html会相应更新。

但是当您向左移动项目（从当前父项分离并附加到父项的父项）或右项（从当前父项分离项目并附加到上级兄弟）时，html不能很好地更新。虽然源树结构和扁平树列表都是正确的。

您可以按右侧的按钮。当你按＆lt;或者＆gt;虽然数据（在控制台中打印）很好，但你会发现html不是正确的。特别是tr类无效。按下＆＃34;＆gt;＆＃34;后的HTML 2.2实际上看起来很奇怪，因为ng-class是有效的，但真正的类attr不是（当你向右移动2.2时它的级别是3）：

<tr ng-repeat="item in flatten_tree2()" ng-include="'fl2_item.inc.html'" ng-class="'level-' + 3" class="ng-scope level-2">

更新

回答我自己 - 我已成功使用angular.copy使其成功。我现在创建一个项目副本，而不是将同一个项目从一个父项移动到另一个项目：

$scope.move_fl2 = function(item, dir) {
    var parent = item['_parent'];
    var index = item['_index'];

    var events = parent['events'];

    // ...

    if (dir == 'left') {
        var parent_parent_events = item['_parent']['_parent']['events'];
        var parent_parent_index = parent_parent_events.indexOf(parent);
        // was: parent_parent_events.splice(parent_parent_index + 1, 0, item);
        parent_parent_events.splice(parent_parent_index + 1, 0, angular.copy(item));
        $scope.del_fl2(item);
    }
    else if (dir == 'right') {
        var upper_item = parent['events'][index - 1];
        upper_item['events'] = (upper_item['events'] || []);
        // was: upper_item['events'].push(item);
        upper_item['events'].push(angular.copy(item));
        $scope.del_fl2(item);
    }
};

仍然回答解释为什么这会有所帮助。

Angular不会根据需要更新UI

0 个答案: