angularjs - 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-repeatdiv 内有三个复选框。然后根据中的通知将其设置为选中/取消选中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>