angularjs - 从远程数据控制复选框状态

Question

我正在尝试制作通知配置页面。基本上，用户应该能够为特定模块选择他希望接收的通知类型。有 3 种类型的通知（电子邮件、SMS 和 UI）。目前我的数组是这样构建的

$scope.modules= [
        {
            "id": 1,
            "name": "Module1",
            "notifications": [
                {
                    "notification": "email"
                }
            ]
        },
        {
            "id": 2,
            "name": "Module2",
            "notifications": [
                {
                    "notification": "sms"
                },
                {
                    "notification": "ui"
                }
            ]
        }
    ];

我正在努力实现这个观点

问题： 当我尝试重复某个模块的通知时，如果例如 {"notification": "email"} 不存在，则复选框不会保持未选中状态，而是从视图中删除。

关于如何执行 ng-repeat 的任何想法？谢谢

JSFiddle

Answer 1

结构有些错误。为什么没有如下通知的对象数组：

"notifications": [ {"sms": true}, {"email": false}, {"ui": true} ];

然后迭代和设置就很容易了。

遍历$scope.modules 并且对于每个这样的模块，在包装ng-repeat div 内有三个复选框。然后根据notifications 中的通知将其设置为选中/取消选中。

<span>Email</span>    <span>Ui</span>    <span>Sms</span>
<div ng-repeat="module in modules">
    {{ module.name }}
    <div ng-repeat="notification in module.notifications">
        <!-- Email -->
        <input type="checkbox" ng-model="notification.email" />
        <!-- Ui -->
        <input type="checkbox" ng-model="notification.ui" />
        <!-- Sms -->
        <input type="checkbox" ng-model="notification.sms" />
    </div>
</div>