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

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

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     lt textarea ng-model  scope field  subfield   gt  lt  textarea gt    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

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

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

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

Examples related to angularjs