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從複選框中獲取複雜對象集

回答

相關問題