角度 JS，多次插入错误

本文关键字：插入 错误 JS 角度 | 更新日期: 2023-09-27 17:55:28

我想从SQL获取数据并使用ng-repeat选项显示在HTML表中，然后我需要编辑表格单元格中的一些值。我的问题是我只在控制器中获取初始值，而更改不会反映在控制器中。这是我的代码：

app.controller('CRUD_EntryController', function ($scope, CRUD_InternalEntryService) {
GetStudentMarkDetails();
function GetStudentMarkDetails() {
    var PromiseGetMarks = CRUD_InternalEntryService.GetMarkDetails();
    PromiseGetMarks.then(function (res) {
        $scope.MarkList = res.data;
    })
}
$scope.mark = {};
$scope.save = function (MarkList) {
    var index = 0;
    $scope.MarkList.forEach(function (mark) {
        console.log('rows #' + (index++) + ': ' + JSON.stringify(mark));
        alert(mark.M1);
    }
}

视图：

    <table class=" table table-condensed" id="myresul">  
        <tr>  
            <th>Slno</th>  
            <th>Name</th>
            <th>RegNo</th>
            <th>ClassNo</th>
            <th>M1</th>
            <th>M2</th>
            <th>M3</th>
        </tr>  
        <tbody data-ng-repeat="mark in MarkList" >  
            <tr>  
            <td class="col-md-1"  >#{{$index+1}}</td>
            <td class="col-md-2" ng-model="mark.Fname">{{mark.Fname}}</td>
            <td class="col-md-2">{{mark.RegNo}}</td>
            <td class="col-md-1">{{mark.ClassNo}}</td>
            <td class="col-md-1"><input type="number" value="{{mark.M1}}" ng-model="M1" class="form-control" /></td>
            <td class="col-md-1"><input type="number" value="{{mark.M2}}" ng-model="M2" class="form-control" /></td>
            <td class="col-md-1"><input type="number" value="{{mark.M3}}" ng-model="M3" class="form-control" /></td>
            </tr>  
            <button data-ng-click="save(MarkList)" class="btn btn-success">Save</button>
        </tbody>  
    </table>

角度 JS，多次插入错误

不要认为你需要定义这个：$scope.mark = {};因为标记是在ng-repeat的范围内设置的。删除它，因为这有点令人困惑，并且将来可能会导致错误。

移除value="{{mark.M1}}"并将模型绑定到ng-model="{{mark.M1}}" 。假设您的魔杖绑定到输入中的 M1、M2 和 M3。

另请参阅 ngModel 的角度文档以获取更多详细信息，并相应地更新您的代码。

顺便说一下，您不必将MarkList作为Save(..)的参数传递，您可以这样做： <button data-ng-click="save()" class="btn btn-success">Save</button>，将Save方法签名更改为Save()并使用$scope.MarkList而不是参数MarkList。

或者将方法更改为每次仅保存特定mark而不是整个列表。

相关文章：