Angular - Dynamic ng-model name with id in ng-repeat

Question

This is my controller:

$scope.inputs = [];
$scope.addInput = function () {
    $scope.inputs.push({
        id: $scope.inputs.length + 1,
    });

};
$scope.removeInput = function (index) {
    $scope.inputs.splice(index, 1);
};

I try this way but didn't work:

<div ng-repeat="input in inputs">
      <textarea   id="activity"
                  name="project_budget_administration[<% input.id %>][activity]"
                  placeholder="Activity"
                  ng-model="project_budget_administration.activity_<% input.id %>"
                  ng-maxlength="100"
                  required></textarea>
</div>

For name attribute of textarea works perfect but for ng-model - not. Also i tried with this syntax ng-model="project_budget_administration.activity[input.id]" and instead of input.id i tried $index, also not working.

Your syntax doesn't make sense. `<% %>` aren't valid angular tags, and I don't see why `$index` or `item` would work -- as they are not defined? — Sterling Archer, Mar 22 '16 at 13:21
you can set whatever tags you want, so i choose this "<% %>" — Вилислав Венков, Mar 22 '16 at 13:22
may be help you http://stackoverflow.com/questions/32470928/angular-formly-adding-form-fields-dynamically-on-user-click/35603088#35603088 — Hadi J, Mar 22 '16 at 13:30
it should be `ng-model="project_budget_administration.activity[input.id]"`. — dfsq, Mar 22 '16 at 13:31
Just good practice : you have the same id for the multiple textarea, use a class, it will be better. — Allenile, Mar 22 '16 at 13:37
i add dynamically textarea and when i write in first textarea same text is in others, because ng-model is the same for all... — Вилислав Венков, Mar 22 '16 at 13:40

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

You can use javascript expressions to dynamically name the ng-model

<div ng-repeat="input in inputs">
  <textarea   id="activity"
              name="project_budget_administration[<% input.id %>][activity]"
              placeholder="Activity"
              ng-model="project_budget_administration['activity_' + input.id]"
              ng-maxlength="100"
              required></textarea>

Fiddle from a different answer - http://jsfiddle.net/DrQ77/ - How can I set a dynamic model name in AngularJS?

edited May 23 '17 at 11:59

Community

1
1

answered Mar 22 '16 at 13:32

KieranDotCo

467
2
16

no man, didn't work when i inspect element it's shows like plain text : "ng-model="project_budget_administration['activity_' + input.id]" – Вилислав Венков Mar 22 '16 at 13:45
Who do you see if you log `{{project_budget_administration}} you should see on that model a field of activity_1 for example (depending on the id) with the data you input into the textarea. – KieranDotCo Mar 22 '16 at 13:51
"project_budget_administration" this is just random name that i make – Вилислав Венков Mar 22 '16 at 13:56
http://jsfiddle.net/DrQ77/564/ - This fiddle shows the dynamic ng-model working, will need you to provide a fiddle where it isn't working. – KieranDotCo Mar 22 '16 at 14:02

Angular - Dynamic ng-model name with id in ng-repeat

1 Answers1