AngularJS:使用输入复选框并从不相关的列表中获取选中的值

时间:2015-05-27 19:33:43

标签: javascript angularjs checkbox

我正在构建一个嵌套树,并在所有叶子中使用AngularJS输入类型复选框。我见过的大多数示例都在单个列表中使用ng-repeat,将模型绑定到列表项,然后获取所选值。

但是我树中的项目都在不同的列表中,所以我不确定如何将它们绑定到同一个模型。还有什么其他方法或什么解决方案可以获得所有已检查的项目而不是它们在同一模型中?

我正在使用的数据示例,叶子将是没有任何子节点的节点:

[{
'Name': 'A',
'Children': [{
    'Name': 'AA',
    'Children': []},
    'Name': 'AB',
    'Children': [{
        'Name': 'ABA'
        'Children': []
    }],
'Name': 'B',
'Children': [{
    'Name': 'BA',
    'Children': [{
        'Name': 'BAA',
        'Children': []
        }]
    }]
}]

我正在使用Angular UI Tree作为我的树,基本标记看起来像这样:

<script type="text/ng-template" id="tree.html">
  <div ui-tree-handle class="tree-node tree-node-content">
      <input data-ng-show="{{node.Children.length == 0}}"
              type="checkbox"
              data-ng-model="node.selected">
      <span class="tree-node">
              {{node.Name}}
      </span>
  </div>
  <ol ui-tree-nodes data-ng-model="node.Children">
      <li ng-repeat="node in node.Children"
          ui-tree-node
          ng-include="'tree.html'">
      </li>
  </ol>
</script>

<div ui-tree=""
    id="tree-root">
    <ol ui-tree-nodes ng-model="treeList">
        <li ng-repeat="node in treeList"
            ui-tree-node
            ng-include="'tree.html'"></li>
    </ol>
</div>

在这个例子中,我将复选框绑定到节点中的node.selected属性。但是为了找到所有选定的节点,我将不得不遍历整个树并检查是否选择了每个节点。由于我的树很大,这将是不可行的,还有另一种方法吗?

0 个答案:

没有答案