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

Question

早上好!

我在堆栈上发现了好几篇与此相关的文章，但我还没有找到任何文章能够准确地完成我正在尝试做的事情。

(引用 JS Fiddle:http://jsfiddle.net/gsLXf/1/)

作为调查的一部分，我提出了一组动态问题。我已经弄清楚如何将文本和 radio 响应中的响应绑定(bind)到我可以发回我的服务器的“响应”对象。我遇到的问题是复选框。正如你在 fiddle 中看到的那样，当我尝试做的时候

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

我所有的复选框都作为一个项目响应(这是有道理的，因为它们都绑定(bind)到相同的值。但是，当我使用

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

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

理想情况下，我对引用的 fiddle 的响应对象应该是这样的:

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

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

我考虑过循环遍历已知的 ID 集来搭建一个响应对象，以便在初始化期间填充它，但是当 Angular 有这么好的方法来即时创建一个响应对象时，这似乎有点过分了(除了这种情况) .

执行此操作的最佳方法是什么？

Answer 1

这是一个可以满足您要求的 fiddle :http://jsfiddle.net/2jVtH/

我已经将整个 HTML 替换为一个名为 cbb 的指令, 用作:

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

(这也使原始代码更清晰，恕我直言，这意味着我会对单选按钮做同样的事情)

该指令使用一个独立的作用域，并在其中放置一个接收复选框值的对象:

scope.model = {}

深$watch在此对象上使用值更新数组，因此您可以获得所需的 response = { "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);
        }
    };
});