Javascript AngularJS使用ngModel从复选框集中获取复杂对象

早上好

我在stack上找到了几篇关于这一点的文章，但我还没有找到任何一篇能够完全实现我要做的事情

（供参考的JS小提琴：）

作为调查的一部分，我提出了一系列动态的问题。我已经找到了如何将文本和无线电响应中的响应绑定到一个“response”对象，我可以将其发布回我的服务器。我遇到的问题是复选框。正如你在小提琴上看到的，当我试着

ng-model="response[question.id]"

我所有的复选框都作为一个项目响应（这很有意义，因为它们都绑定到相同的值

ng model=“响应[question.id][option.id]”

我弹出一个错误，因为question.id尚未实例化，所以option.id无法推送到对象上

理想情况下，被引用小提琴的响应对象如下所示：

{
   "123456": "2", //radio question
   "789012": //checkbox question 
       ["5", "6"] //list of checkbox options ids selected
}

我的用户将动态创建表单，因此我必须能够在所有情况下非常优雅地处理此问题。我无法将任何与对象相关的数据硬编码到控制器中，也无法手动创建模型对象来处理此情况

我已经考虑过通过已知的ID集循环构造一个响应对象，以便在初始化期间填充，但是如果Angular有一个很好的方法来动态创建一个响应对象（除了这种情况），那就太过分了

---

做这件事最好的方法是什么？

这里有一把小提琴，它可以做你想要的：

我将整个HTML替换为一个名为

cbb

的指令，用作：

<div cbb question="question" response="response"></div>

此对象上的深度

$watch

使用值更新数组，因此您可以得到所需的

响应={“789012”：[“7”，“8”]}

格式

指令完整代码：

surveyApp.directive("cbb", function() {
    return {
        restrict: "A",
        scope: {
            question: "=",
            response: "="
        },
        template:
            "<div class='text'>{{question.question}}</div>" +
            '<div class="options" ng-repeat="option in question.options">' +
                '<input type="checkbox" ng-model="model[option.id]" value="{{option.id}}"/> {{option.value}}' +
                '<tags ng-if="option.tags"></tags>' +
                '<action ng-if="option.action"></action>' +
            '</div>',
        link: function(scope, element, attrs) {
            if( !scope.response[scope.question.id] ) {
                scope.response[scope.question.id] = [];
            }
            var result = scope.response[scope.question.id];
            scope.model = {};
            scope.$watch("model", function(newval) {
                var x;
                result.splice(0);
                for( x in newval ) {
                    if( !newval.hasOwnProperty(x) ) continue;
                    if( newval[x] ) result.push(x);
                }
            }, true);
        }
    };
});

surveyApp.directive（“cbb”，function（）{
返回{
限制：“A”，
范围：{
问题：“=”，
答复：“=”
},
模板：
“{{问题.问题}”+
'' +
“{{option.value}}”+
'' +
'' +
'',
链接：函数（范围、元素、属性）{
if（！scope.response[scope.question.id]）{
scope.response[scope.question.id]=[]；
}
var result=scope.response[scope.question.id]；
scope.model={}；
范围：$watch（“模型”、功能（newval）{
var x；
结果：拼接（0）；
for（newval中的x）{
如果（！newval.hasOwnProperty（x））继续；
if（newval[x]）result.push（x）；
}
}，对）；
}
};
});

我在现有的Angular指令和html上尽了最大努力，但当复选框未选中时，数组中仍然有多余的空字符串

我使用

ng init

ng-init="response[question.id] = []"

jsfiddle：

---

如果您将答案id最初放在响应中，这没有问题：谢谢您的评论，但除非您能向我展示一些基于questions对象动态执行的方法，否则这不会起作用。所有这些都是由数据库和中间层API驱动的，因此我无法将任何内容手动/硬编码到控制器中（比如将该对象添加到响应对象中。现在它是动态的：@stefchri-Man，这太接近了！而且foreach非常棒，这将使我在将来不会遇到任何问题！你能帮我增加一个部分吗（从最初的问题扩展一点）。现在复选框对象上的数组只捕获true/false，而不是该选项的值。我可以用任何方法让它获取值（选项ID）？非常感谢解决了你的小问题：ng true ValueThank@Nikos，我简化了我的Fiddle设置，但实际上我已经有了几个通过模板生成此调查的指令。我会尝试将你在这里得到的内容回填到我的代码中！这看起来是一个很好的解决方案，所以我会看看我能从中得到什么。Integ评分很好！我能够毫无问题地将其应用到我的模板中，这绝对是所有回复中最干净的实现。感谢您的帮助@NikosThis没有解决我的全部问题，但是+1为我提供了一种更简单的方法来构建对象，而不必循环我的问题对象！

ng-init="response[question.id] = []"