How can I set a dynamic model name in AngularJS

Question

I want to populate a form with some dynamic questions  fiddle here     lt div ng-app ng-controller  QuestionController  gt       lt ul ng-repeat  question in Questions  gt           lt li gt               lt div gt   question Text   lt  div gt               lt select ng-model  Answers    question Name      ng-options  option for option in question Options  gt               lt  select gt           lt  li gt       lt  ul gt        lt a ng-click  ShowAnswers    gt Submit lt  a gt   lt  div gt    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                   Everything works  except the model is literally Answers    question Name      instead of the evaluated Answers  GenderQuestion    How can I set that model name dynamically

User · Answer

What I ended up doing is something like this:

In the controller:

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

so in the templates I could use totally dynamic names, and not just under a certain hard-coded element (like in your "Answers" case):

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

Hope this helps.

User · Answer

Or you can use   lt select   ngModel    Answers    question Name      ng-options  option for option in question Options  gt           lt  select gt

User · Answer

You can use something like this scopeValue field   but if your field is in another object you will need another solution   To solve all kind of situations  you can use this directive   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 example    lt input dynamic-model   scopeValue     field  type  text  gt

User · Answer

http   jsfiddle net DrQ77   You can simply put javascript expression in ng-model

User · Answer

To make the answer provided by  abourget more complete  the value of scopeValue field  in the following line of code could be undefined  This would result in an error when setting subfield    lt textarea ng-model  scopeValue field  subfield   gt  lt  textarea gt    One way of solving this problem is by adding an attribute ng-focus  nullSafe field    so your code would look like the below    lt textarea ng-focus  nullSafe field   ng-model  scopeValue field  subfield   gt  lt  textarea gt    Then you define nullSafe  field   in a controller like the below    scope nullSafe   function   field       if     scope scopeValue field           scope scopeValue field                 This would guarantee that scopeValue field  is not undefined before setting any value to scopeValue field  subfield     Note  You can t use ng-change  nullSafe field   to achieve the same result because ng-change happens after the ng-model has been changed  which would throw an error if scopeValue field  is undefined

[angularjs] How can I set a dynamic model name in AngularJS?

Examples related to angularjs