2

早上好！

我在堆栈上找到了几篇与此相关的帖子，但我还没有找到任何可以完成我正在尝试做的事情的帖子。

（JS Fiddle 供参考：http: //jsfiddle.net/gsLXf/1/）

作为调查的一部分，我有一组动态的问题。我已经想出了如何将文本和无线电响应中的响应绑定到可以发回服务器的“响应”对象。我遇到的问题是复选框。正如您在小提琴中看到的那样，当我尝试做

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

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

ng-model="response[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 有这样一种很好的方式来动态创建响应对象时（这种情况除外），这似乎有点矫枉过正。

这样做的最佳方法是什么？

4

2 回答 2

2

这是一个你想要做的小提琴：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);
        }
    };
});
于 2014-02-11T15:11:35.203 回答
1

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

我使用ng-init 

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

jsfiddle：

http://jsfiddle.net/P9dsR/

于 2014-02-11T15:22:32.897 回答