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}}].
2 answers
solution1
1 2016-05-11 03:10:01
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 .
solution2
1 ACCPTED 2016-05-11 05:46:24
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.