ng-repeat variables to ng-model

Question

my html:

{%verbatim%}
                <tr ng-repeat="rank in sev_ranks">
                      <td>
                        {{rank.id}}
                      </td>

                      <td>
                        <div class="col-md-12" style="height:100px">
                         {{rank.siverity}}<br>
                        <textarea ng-model="rank.ngmodel" class="form-control"></textarea>
                         </div>
                      </td>

                      <td>
                        <div class="col-md-12" style="height:100px">
                           {{rank.criteria}}<br>
                        <textarea class="form-control">{{rank.criteria}}</textarea>
                         </div>
                      </td>
                </tr>
                {%endverbatim%}

Angular script:

$scope.sev_ranks = [{
                id: 1,
                siverity: 'A',
                criteria: 'D',
                ngmodel: 'stxtarea1'
        }, {
            id: 2,
            siverity: 'B',
            criteria: 'E',
            ngmodel: 'stxtarea2'
        }, {
            id: 3,
            siverity: 'C',
            criteria: 'F',
            ngmodel: 'stxtarea3'
        }];

        $scope.stxtarea1 = 'A';
        $scope.stxtarea2 = 'B';
        $scope.stxtarea3 = 'C';

I want to actually change the value of ng-model dynamically. For example: ng-model = "stxtarea1". But as per the code I can only get ng-model="rank.ngmodel", not changing the value. What can I do for that? I put the mng-model value inside "{{}}" also. But didnt work. Can help me on this? Thanks in advance.

When I add ng-model="{{rank.ngmodel}}" I get an angular error as Syntax Error: Token 'rank.ngmodel' is unexpected, expecting [:] at column 3 of the expression [{{rank.ngmodel}}] starting at [rank.ngmodel}}].

see here http://stackoverflow.com/questions/13989453/how-to-give-value-dynamically-for-ng-model-in-angularjs — Mahbubur Rahman, May 11 '16 at 03:09
did you try something like : $parent[rank.ngmodel] from the link Mahbubur posted ? And also .. are you really really sure you want to go this route? To me this seems like really brittle code. — sirrocco, May 11 '16 at 04:34
Explain your question. I am not clear yet. JSfiddle for you: https://jsfiddle.net/U3pVM/24717/ — Alpesh Prajapati, May 11 '16 at 05:04
I need to actually save the value from each td. So by using the ng-model=rank.ngmodel, I can get the value dynamically(ngmodel value will change inside each textarea ex: stxtarea1 , stxtarea2 etc.) so that I can pass that ngmodel into my scope and save that value. Hope my logic is correct — vellattukudy, May 11 '16 at 05:11
did you try something like this ng-model="sev_ranks[rank.ngmodel]" — Erez, May 11 '16 at 06:00
check this http://stackoverflow.com/questions/22489683/dynamic-ng-model-name-in-angularjs-form and this http://stackoverflow.com/questions/25680264/angular-js-ng-repeat-with-dynamic-ng-model — Erez, May 11 '16 at 06:10

score 1 · Answer 1 · answered May 11 '16 at 03:10

As per my thinking you need to change your angular script as following :

$scope.sev_ranks = [{
                id: 1,
                siverity: 'A',
                criteria: 'D',
                ngmodel: $scope.stxtarea1
        }, {
            id: 2,
            siverity: 'B',
            criteria: 'E',
            ngmodel: $scope.stxtarea2
        }, {
            id: 3,
            siverity: 'C',
            criteria: 'F',
            ngmodel: $scope.stxtarea3
        }];

        $scope.stxtarea1 = 'A';
        $scope.stxtarea2 = 'B';
        $scope.stxtarea3 = 'C';

you are writing 'stxtarea1' - so it is considering as a string. so you need to write it as $scope.stxtarea1 .

I tried it with `ng-model="{{rank.ngmodel}}"` and `ng-model="rank.ngmodel". But didnt work as per the change u suggested — vellattukudy, May 11 '16 at 03:16
i don't want you to change in html. I just want you to change in array. — Jainish Jariwala, May 11 '16 at 03:19

score 1 · Accepted Answer · answered May 11 '16 at 05:46

Check the code and it is working fine for your logic.

angular.module('myApp', [])
           .controller('myCtrl',function($scope) {
 $scope.stxtarea1 = 'A';
        $scope.stxtarea2 = 'B';
        $scope.stxtarea3 = 'C';
$scope.sev_ranks = [{
                id: 1,
                siverity: 'A',
                criteria: 'D',
                ngmodel: $scope.stxtarea1
        }, {
            id: 2,
            siverity: 'B',
            criteria: 'E',
            ngmodel: $scope.stxtarea2
        }, {
            id: 3,
            siverity: 'C',
            criteria: 'F',
            ngmodel: $scope.stxtarea3
        }];

        
});

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <table>
        <tr ng-repeat="rank in sev_ranks">
            <td>
                {{rank.id}}
            </td>
            <td>
                <div class="col-md-12" style="height:100px">
                     {{rank.siverity}}
                    <br>
                    <textarea ng-model="rank.ngmodel" class="form-control"></textarea>
                </div>
            </td>
            <td>
                <div class="col-md-12" style="height:100px">
                       {{rank.criteria}}
                    <br>
                        <textarea class="form-control">{{rank.criteria}}</textarea>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

ng-repeat variables to ng-model

2 Answers2