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

我发现，在这个触摸栈的几个职位，但我还没有发现任何完成我想要做的正是。

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

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有一个很好的方法来创建响应对象（除了这种情况）。

要做到这一点，最好的方法是什么？

来源

2014-02-11 Shane

如果你把答案编号的最初反应是没有问题的：http://jsfiddle.net/Uh2Gc/ –

感谢您的评论，但这不会工作，除非您可以告诉我一些方法来根据问题对象动态做到这一点。所有这些都是由数据库和中间层API驱动的，所以我不能在控制器中手动/硬编码任何东西（比如将该对象添加到响应对象中）。 – Shane

现在它是动态的：http://jsfiddle.net/ Uh2Gc/1/ –

这里是一个小提琴，你想要做什么：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-11 15:11:35

谢谢@Nikos，我简化了我的设置小提琴，但在交流质量我已经有几个指令可以通过模板进行调查。我会尽力把你在这里的东西拿回来，并回填到我的代码中！它看起来像一个甜蜜的解决方案，所以我会看看我能从中得到什么。 – Shane

完美整合！我能够毫无问题地将其应用到我的模板中，它绝对是所有响应中最干净的实现。感谢您的帮助@Nikos – Shane

我尽我所能对存在的角指令和HTML，但它仍然在阵列冗余的空字符串时复选框选中。

，而且我用ng-init

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

的jsfiddle：

http://jsfiddle.net/P9dsR/

来源

2014-02-11 15:22:32

这并没有解决我的问题的全部范围，但+1给了我一个更简单的方法来支撑对象，而不必循环我的问题对象！ – Shane

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

回答

相关问题