Setting ng-model value dynamically to the value of js variable in AngularJS

Question

Similar questions have bee asked before and I have tried solutions given to them, but my problem is little different.

Lets say I have an array of objects like this in my controller

$scope.objArray = [
  {
    id:1,
    name:"placeholder1"
  },
  {
    id:2,
    name:"placeholder2"
  }
];

now based on this array I am generating a form dynamically like this

  <div ng-repeat="field in fields">
    {{field.field_name}} </br>
    <input type="text" ng-model="field.field_name"><br>
  </div>

here in this form i want ng-model value to be set as placeholder1 and placeholder2 and not like javascript variable like field.field_name because my targets are coming from another source which contains html like below.

<p>this is sample html {{placeholder1}}. again sample html {{placeholder2}} </p>

i don't have those JS variables in here. I could not find any solution which will work this way for me so far.

here is link to plunk: http://plnkr.co/edit/ttaq0l3PDRu4piwSluUX?p=preview

Please provide a minimal working example either here (using the code snippet functionality) or on jsFiddle, Plunker, etc. It's not really clear where your variables are coming from, so your question is impossible to answer as it stands right now. — Agop
– Agop, Commented Jul 8, 2015 at 18:40

dfsq · Accepted Answer · 2015-07-08 18:48:31Z

2

In your case it will look like this:

<div ng-repeat="field in fields">
    {{field.field_name}}
    <br>
    <input type="text" ng-model="$parent[field.field_name]">
    <br>
</div>

Note, that you have to use $parent reference because in your case you want to set property of the outer scope (where objArray is defined), however ngRepeat creates child scopes per iteration, so you need one step up.

Demo: http://plnkr.co/edit/35hEihmxTdUs6IofHJHn?p=info

answered Jul 8, 2015 at 18:48

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting ng-model value dynamically to the value of js variable in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related