Search code examples
javascriptangularjsdjangoangular-ngmodel

ng-repeat variables to ng-model

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}}].

Solution

  • 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>