Como posso definir um nome de modelo dynamic no AngularJS?

Eu quero preencher um formulário com algumas questões dinâmicas (violino aqui ):

  • {{question.Text}}
Submit
​ function QuestionController($scope) { $scope.Answers = {}; $scope.Questions = [ { "Text": "Gender?", "Name": "GenderQuestion", "Options": ["Male", "Female"]}, { "Text": "Favorite color?", "Name": "ColorQuestion", "Options": ["Red", "Blue", "Green"]} ]; $scope.ShowAnswers = function() { alert($scope.Answers["GenderQuestion"]); alert($scope.Answers["{{question.Name}}"]); }; }​

Tudo funciona, exceto que o modelo é literalmente Answers [“{{question.Name}}”], em vez das respostas avaliadas [“GenderQuestion”]. Como posso definir esse nome de modelo dinamicamente?

http://jsfiddle.net/DrQ77/

Você pode simplesmente colocar a expressão javascript no ng-model .

Você pode usar algo como this scopeValue[field] , mas se seu campo estiver em outro object, você precisará de outra solução.

Para resolver todos os tipos de situações, você pode usar esta diretiva:

 this.app.directive('dynamicModel', ['$compile', '$parse', function ($compile, $parse) { return { restrict: 'A', terminal: true, priority: 100000, link: function (scope, elem) { var name = $parse(elem.attr('dynamic-model'))(scope); elem.removeAttr('dynamic-model'); elem.attr('ng-model', name); $compile(elem)(scope); } }; }]); 

Exemplo de HTML:

  

O que acabei fazendo é algo assim:

No controlador:

 link: function($scope, $element, $attr) { $scope.scope = $scope; // or $scope.$parent, as needed $scope.field = $attr.field = '_suffix'; $scope.subfield = $attr.sub_node; ... 

Assim, nos modelos eu poderia usar nomes totalmente dynamics, e não apenas sob um determinado elemento codificado (como em seu caso “Respostas”):

  

Espero que isto ajude.

Para tornar a resposta fornecida por @abourget mais completa, o valor de scopeValue [field] na seguinte linha de código pode ser indefinido. Isso resultaria em um erro ao configurar o subcampo:

  

Uma maneira de resolver esse problema é adicionar um atributo ng-focus = “nullSafe (field)”, para que seu código se pareça com o abaixo:

  

Então você define nullSafe (field) em um controller como o abaixo:

 $scope.nullSafe = function ( field ) { if ( !$scope.scopeValue[field] ) { $scope.scopeValue[field] = {}; } }; 

Isso garantiria que o scopeValue [field] não seja indefinido antes de definir qualquer valor para scopeValue [field] [subfield].

Nota: Você não pode usar ng-change = “nullSafe (field)” para obter o mesmo resultado, porque ng-change ocorre depois que o ng-model foi alterado, o que causaria um erro se scopeValue [field] não estivesse definido.