Come posso impostare un nome di modello dinamico in AngularJS?

Voglio popolare un modulo con alcune domande dinamiche (violino qui ):

  • {{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}}"]); }; }​

Tutto funziona, tranne il modello è letteralmente Risposte [“{{question.Name}}”], invece delle Risposte valutate [“GenderQuestion”]. Come posso impostare dynamicmente il nome di questo modello?

http://jsfiddle.net/DrQ77/

Puoi semplicemente inserire un’espressione javascript in ng-model .

Puoi usare qualcosa come questo scopeValue[field] , ma se il tuo campo si trova in un altro object avrai bisogno di un’altra soluzione.

Per risolvere tutti i tipi di situazioni, è ansible utilizzare questa direttiva:

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

Esempio HTML:

  

Quello che ho finito è qualcosa del genere:

Nel controller:

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

così nei template potrei usare nomi totalmente dinamici, e non solo sotto un certo elemento hard-coded (come nel caso “Answers”):

  

Spero che questo ti aiuti.

Per rendere la risposta fornita da @abourget più completa, il valore di scopeValue [campo] nella seguente riga di codice potrebbe essere indefinito. Ciò comporterebbe un errore durante l’impostazione del sottocampo:

  

Un modo per risolvere questo problema è aggiungendo un attributo ng-focus = “nullSafe (campo)”, quindi il tuo codice sarà simile al seguente:

  

Quindi definisci nullSafe (campo) in un controller come il seguente:

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

Ciò garantirebbe che scopeValue [campo] non sia indefinito prima di impostare alcun valore su scopeValue [campo] [sottocampo].

Nota: non è ansible utilizzare ng-change = “nullSafe (campo)” per ottenere lo stesso risultato poiché ng-change si verifica dopo la modifica del modello ng, che genera un errore se scopeValue [campo] non è definito.