Come posso impostare un nome di modello dinamico in AngularJS?

Question

voglio compilare un modulo con alcune domande dinamiche (violino here):

<div ng-app ng-controller="QuestionController"> 
    <ul ng-repeat="question in Questions"> 
     <li> 
      <div>{{question.Text}}</div> 
      <select ng-model="Answers['{{question.Name}}']" ng-options="option for option in question.Options"> 
      </select> 
     </li> 
    </ul> 

    <a ng-click="ShowAnswers()">Submit</a> 
</div> 
​ 
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 Answers [ "{{}} question.Name"], al posto delle risposte valutati [ "GenderQuestion"]. Come posso impostare dinamicamente il nome di questo modello?

Answer 1

http://jsfiddle.net/DrQ77/

Si può semplicemente inserire javascript espressione in ng-model.

Answer 2

Quello che ho finito per fare è qualcosa di simile:

Nel controllore:

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 modelli ho potuto utilizzare nomi completamente dinamici, e non solo sotto un certo elemento hard-coded (come nel caso "Answers"):

<textarea ng-model="scope[field][subfield]"></textarea> 

Spero che questo aiuti.

Answer 3

Per rendere la risposta fornita da @abourget più completa, il valore di scopeValue [campo] nella seguente riga di codice potrebbe non essere definito. Ciò si tradurrebbe in un errore durante l'impostazione sottocampo:

<textarea ng-model="scopeValue[field][subfield]"></textarea> 

Un modo per risolvere questo problema è con l'aggiunta di un attributo ng-focus = "nullSafe (campo)", in modo che il codice sarebbe apparire come il qui sotto:

<textarea ng-focus="nullSafe(field)" ng-model="scopeValue[field][subfield]"></textarea> 

Poi si definiscono nullSafe (campo) in un controller come di seguito:

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

Ciò garantirebbe che scopeValue [campo] non è definito prima di impostare qualsiasi valore per scopeValue [campo] [sottocampo ].

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

Answer 4

È possibile utilizzare qualcosa come questo scopeValue[field], ma se il vostro campo è in un altro oggetto avrete bisogno di un'altra soluzione.

Per risolvere tutti i tipi di situazioni, è possibile 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); 
     } 
    }; 
}]); 

Html esempio:

<input dynamic-model="'scopeValue.' + field" type="text">