AngularJS с использованием ngModel для получения сложного объекта из Checkbox set

Question

Доброе утро!

Я нашел несколько сообщений в стеке, которые касаются этого, но я не нашел ни одного, который выполнит то, что я пытаюсь сделать точно.

(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 
} 

Мои пользователи будут создавать формы динамически, поэтому я должен иметь возможность обрабатывать это очень изящно во всех ситуациях. Я не могу жестко закодировать любые связанные с объектом данные в контроллере, и я не могу вручную создавать объекты модели для обработки этой ситуации.

Я рассмотрел цикл, пройдя через известный идентификатор, чтобы закрасить объект ответа, который должен быть заполнен во время инициализации, но кажется, что он переполнен, когда Угловая имеет такой хороший способ просто создать объект ответа «на лету» (за исключением этой ситуации).

Каков наилучший способ сделать это?

Answer 1

Вот скрипка, который делает то, что вы хотите: http://jsfiddle.net/2jVtH/

Я заменил весь HTML с директивой, называется cbb, используются как:

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

(это делает исходный код чище слишком , IMHO, то есть я бы сделал то же самое для переключателя)

Директива использует изолированную область и в ней помещается объект, который получает значения флажка:

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); 
     } 
    }; 
}); 

Answer 2

я стараюсь на существовавший Угловое директиву и HTML, но он по-прежнему имеют избыточную пустую строку в массиве когда флажок снят.

И я использую ng-init

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

jsfiddle:

http://jsfiddle.net/P9dsR/