Question

我正在尝试创建一个角度指令，这使我能够按类别从项目列表中进行选择。应使用复选框选择每个项目。

指令的输入数据类似于

[
  {
    "id": "1",
    "name": "category1",
    "items": [
      {
        "id": "1",
        "name": "item1"
      },
      {
        "id": "2",
        "name": "item2"
      },
      {
        "id": "3",
        "name": "item3"
      },
      {
        "id": "4",
        "name": "item4"
      }
    ]
  },
  {
    "id": "2",
    "name": "category2",
    "items": [
      {
        "id": "5",
        "name": "item5"
      },
      {
        "id": "6",
        "name": "item6"
      }
    ]
  }
]

预检项目的对象是：

{
  "1": [
    "2",
    "4"
  ]
}

此处具有ID为2的项目和来自类别1的项目应该预先检查。

我的代码会生成以下视图：

使用ng-checked指令处理checked状态：

<input id="item-{{item.id}}" value="{{item.id}}" type="checkbox" ng-checked="isSelected(cat,item)">

选中/取消选中某个项目时，应更新所选项目对象以反映当前状态。我怎么处理这个？所有这些都应该以不同的方式构建吗？

见我的管道工：http://plnkr.co/edit/6fbfZnQCq5fq1zDp8VIB。

Answer 1

与往常一样，有多种方法可以实现这一目标。我的建议是：

在您的输入上使用ng-model：

<input ng-model="selected[cat.id][item.id]" 
       id="item-{{item.id}}" 
       value="{{item.id}}" 
       type="checkbox" 
       ng-checked="selected[cat.id][item.id]">

这需要稍微修改您的selectedItems属性（它现在是一个对象而不是一个数组）：

$scope.selectedItems = {
    "1": {
        "2": true,
        "4": true
    }
};

HTML中的ng-checked会自动检查标记为true的项目。

我不确定你想如何处理类别的选择，但我希望这会给你一个想法！

检查更新后的Plunker。

如何在一组动态复选框

1 个答案: