1

我正在尝试在 AngularJS 中创建复选框层次结构。我可以创建一个父复选框，它会自动检查子复选框，如果我手动检查子复选框，它将更新其子复选框（父复选框）。但是，如果我单击父复选框，它不会更新孙子的复选框。

在我添加 JavaScript 以确保父复选框更新孙子复选框之前，我想知道是否有更简单的方法。这是我的代码和一个jsFiddle供您欣赏。

<div ng-app="">
    <strong>Parent</strong> (will check all Child boxes):
    <input type="checkbox" ng-model="parent" />
    <br/>
    <strong>Child 1</strong>:
    <input type="checkbox" ng-checked="parent" />
    <br />
    <strong>Child 2</strong>:
    <input type="checkbox" ng-checked="parent" />
    <br />
    <strong>Child 3</strong> (will check all Grandchild boxes):
    <input type="checkbox" ng-checked="parent" ng-model="child" />
    <br />
    <strong>Grandchild 1</strong>:
    <input type="checkbox" ng-checked="child" />
    <br />
    <strong>Grandchild 2</strong>:
    <input type="checkbox" ng-checked="child" />
    <br />
    <strong>Grandchild 3</strong>:
    <input type="checkbox" ng-checked="child" />
</div>

任何帮助，将不胜感激！

另外，有 1500 个代表的人可以通过创建标签“angularjs-ng-checked”来帮助我吗？那太棒了！

4

2 回答 2

3

不幸的是，没有更简单的方法。

通过 github从 Misko ：

...我们认为您尝试做的事情没有意义。ng-checked 创建单向数据绑定，但 ng-model 创建双向数据绑定。本质上，您有两个模型连接到同一个输入元素，我认为这是错误的。我认为 ng-model 和 ng-checked 应该单独使用，即一个或另一个但不能一起使用。

除了使用指令或自己在控制器中同步检查之外，没有太多选择。

于 2013-04-24T14:45:46.207 回答
0

我一直在做一些摆弄（哈哈），我想出了一个似乎很通用的解决方案......意思是，你可以有尽可能多的嵌套复选框，只要你的心想要。我确信我正在遵循一些奇怪的做法，并且可能存在可以提高性能的领域——这肯定是循环通过很多对象——所以请随意批评它！我很想听听任何反馈。

代码可以在这个jsFiddle找到。我也会在这里发布。

的HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="../js/angularjs106.js"></script>
    <script src="angular_checkbox.js"></script>
    <link rel="stylesheet" href="angular_checkbox.css" />
  </head>
  <body ng-app>
    <div ng-controller="Ctrl">
      <ul>
        <li>
          <input type="checkbox" value="allChecks.id" ng-model="allChecks.isChecked" ng-change="checkChange(allChecks)">
          <label>{{allChecks.id}}</label>
        </li>
        <li ng-repeat="child in allChecks.children">
          <input type="checkbox" ng-model="child.isChecked" ng-change="checkChange(child)">
          <label>{{child.id}}</label>
          <ul>
            <li ng-repeat="grandchild in child.children">
              <input type="checkbox" ng-model="grandchild.isChecked" ng-change="checkChange(grandchild)">
              <label>{{grandchild.id}}</label>
              <ul>
                <li ng-repeat="grandgrandchild in grandchild.children">
                  <input type="checkbox" ng-model="grandgrandchild.isChecked" ng-change="checkChange(grandgrandchild)">
                  <label>{{grandgrandchild.id}}</label>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>  
</html>

JavaScript

function Ctrl($scope) { 
  function Node(id, isChecked, parent) {
    this.id = id;
    this.isChecked = isChecked;
    this.parent = parent;
    this.children = [];
  }

  var parent = new Node('ALL', true, "");
  var child1 = new Node('Child 1', true, parent);
  var gchild1 = new Node('Grandchild 1', true, child1);
  var gchild2 = new Node('Grandchild 2', true, child1);
  var gchild3 = new Node('Grandchild 3', true, child1);
  child1.children.push(gchild1, gchild2, gchild3);
  var child2 = new Node('Child 2', true, parent);
  var child3 = new Node('Child 3', true, parent);
  var child4 = new Node('Child 4', true, parent);
  var gchild4 = new Node('Grandchild 4', true, child4);
  var gchild5 = new Node('Grandchild 5', true, child4);
  var gchild6 = new Node('Grandchild 6', true, child4);
  var ggchild1 = new Node('Grandgrandchild 1', true, gchild6);
  var ggchild2 = new Node('Grandgrandchild 2', true, gchild6);
  var ggchild3 = new Node('Grandgrandchild 3', true, gchild6);
  gchild6.children.push(ggchild1, ggchild2, ggchild3);
  child4.children.push(gchild4, gchild5, gchild6);
  var child5 = new Node('Child 5', true, parent);
  parent.children.push(child1, child2, child3, child4, child5);
  $scope.allChecks = parent;

  function parentCheckChange(item) {
    for (var i in item.children) {
      item.children[i].isChecked = item.isChecked;
      if (item.children[i].children) {
        parentCheckChange(item.children[i]);
      }
    }
  }

  function childCheckChange(parent) {
    var allChecks = true;
    for (var i in parent.children) {
      if (!parent.children[i].isChecked) {
        allChecks = false;
        break;
      }
    }
    if (allChecks) {
      parent.isChecked = true;
    }
    else {
      parent.isChecked = false;
    }
    if (parent.parent) {
      childCheckChange(parent.parent);
    }
  }

  $scope.checkChange = function(item) {
    // We're handling the ALL checkbox
    if (item.id === $scope.allChecks.id) {
      parentCheckChange(item);
    }
    // We're handling the toggling of all of the children here
    else {
      if (item.children) {
        parentCheckChange(item);
      }
      childCheckChange(item.parent);
    }
  };
}

微小的 CSS

ul {
  list-style: none;
}

无论如何，我想找出一种在对象中找到父对象的方法。事实证明，原生 JavaScript 对象不包含对子对象父对象的引用，因此我决定创建一个名为 Node.js 的类。当我实例化节点时，我可以将父对象设置为包含子对象的对象。一旦我这样做了，递归就变得很容易了。

当我们意识到我们有一个父母时，就会调用 parentCheckChange。childCheckChange 在孩子的支票更改时调用（呃！），但它用于监视所有父母的孩子......如果所有孩子都被检查，那么我们需要确保父母被检查，因为这parent 已经被检查，我们需要检查它的 parent 是否应该被检查（递归地）。

代码可能有点混乱，所以如果您感到困惑，请提出问题！

于 2013-04-25T00:41:05.150 回答