ng重复变量到ng模型

ng-repeat variables to ng-model

本文关键字:ng 模型 变量      更新时间:2023-09-26

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%}

角度脚本:

$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';

我想动态地改变ng模型的值。例如:ng model="stxtarea1"。但根据代码,我只能得到ng model="rank.ngmodel",而不能更改值。我能做些什么?我还将mng模型值放在"{{}}"中。但没用。能帮我吗?提前谢谢。

当我添加ng-model="{{rank.ngmodel}}"时,我得到的角度误差为Syntax Error: Token 'rank.ngmodel' is unexpected, expecting [:] at column 3 of the expression [{{rank.ngmodel}}] starting at [rank.ngmodel}}].

检查代码,它对您的逻辑运行良好。

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>

根据我的想法,您需要更改角度脚本,如下所示:

$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';

您正在编写'stxtarea1',因此它被视为一个字符串。所以你需要把它写成$scope.stxtarea1