Question

我试图了解一下Angular。特别是，我想创建一个分层数据结构，可以使用分层视图进行操作：

Root:
  - addChild
  - child 1: { remove, addChild, child1, child2, ...}
  - child 2: { remove, addChild, child1, child2, ...}
  ....

（http://jsfiddle.net/xtofl/n3jqM/12处的真实代码）

目前我试图停在2级，即Root有孩子和孙子。

孙子们去除＆＃39;按钮确实触发child.remove(grandchild)功能。但是，删除元素不会导致删除行：（

我没有理解为什么。最重要的是，小提琴的例子似乎同时增加了4个孙子。

相关代码：

function Controller($scope) {
    $scope.nextChildIndex = 1;
    $scope.addChild = function () {
        $scope.children.push(makeChild($scope.nextChildIndex++));
    };
    $scope.removeChild = function (child) {
        $scope.children.remove(child);
    };
    $scope.children = [];
}

var makeChild = function (i) {
    var nextIndex = 1;
    var ret = {
        index: i,
        children: []
    };
    ret.addChild = function () {
        ret.children = makeChild(nextIndex++);
    };
    ret.removeChild = function (child) {
        ret.children.remove(child);
    };
    return ret;
};

相关的html：

    <ul ng-repeat="grandchild in child.children">
        <li class="grandchild">
            <button ng-click="child.removeChild(grandchild)">-grandchild</button>
            <span>child {{grandchild.index}}</span>
        </li>
    </ul>

问题：这个makeChild函数有什么错误，ng-click="addChild()"调用一次添加4 li个元素，而ng-click="child.removeChild(grandchild)"不会导致孙子被删除？

Answer 1

你的问题不在AngularJS

中

与Array.prototype.remove错误

应该是

Array.prototype.remove = function (element) {
    var index = this.indexOf(element);
    this.splice(index,1 );
};

更新了fdl - http://jsfiddle.net/STEVER/n3jqM/13/

<强> UPD：

而不是

    ret.children = makeChild(nextIndex++);

你应该做

    ret.children.push(makeChild(nextIndex++));

http://jsfiddle.net/STEVER/n3jqM/14/

享受;）

angular.js层次模型：孙子不工作

1 个答案: