0

我有一个来自控制器的主题列表，这些主题正在填充复选框。最初检查了一些复选框，我有一个编辑按钮。当我单击更新按钮时，应该会弹出一个警报，并且警报应该显示检查主题的 ID。但问题是，当我加载页面时，如果我单击更新按钮，最初检查的主题 ID 不会传递给控制器​​。只有当我取消选中这些复选框并重新选中它们时它才有效。这是我的代码片段。

<html>
    <head>
        <title></title>


        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


        <script>

            var myApp2=angular.module("myModule2",[]);

            myApp2.controller("controller2",function($scope){

$scope.message="test";

$scope.Subjects=[
    {SubjectId:1,SubjectName:"Bangla"},
    {SubjectId:2,SubjectName:"English"},
    {SubjectId:3,SubjectName:"Math"},
    {SubjectId:4,SubjectName:"Science"},
    {SubjectId:5,SubjectName:"BGS"},
    {SubjectId:6,SubjectName:"Religious"},
    
    
];




$scope.SubjectIds=[2,5];



$scope.subjectModel = {};

$scope.edit = function () {

    var checkedSubjects = [];
    for (var k in $scope.subjectModel) {
        if ($scope.subjectModel.hasOwnProperty(k) && $scope.subjectModel[k]) {
            checkedSubjects.push(k);
        }
    }

    //do your stuff with the ids in `checkedBooks`
       alert(checkedSubjects);
}

});



        
        </script>
       
    </head>

    <body ng-app="myModule2" ng-controller="controller2">

    


        
    Subjects:
    <div ng-repeat="subj in Subjects">

        <input type="checkbox" ng-model="subjectModel[subj.SubjectId]" ng-checked="SubjectIds.indexOf(subj.SubjectId)!=-1"/>{{subj.SubjectName}}



    </div>

    <div>

        <input type="button" class="btn btn-warning" value="Update" id="updt" ng-click="edit()"/>
    </div>



    </body>




</html>

4

1 回答 1

0

问题是使用不当ng-model。

首先：要正常工作ng-model，您必须创建由代码创建的变量的适当实例，并设置其值true or false取决于变量中是否存在 id $scope.Subjects[i]：

$scope.subjectModel = [];
for(var i = 0; i < $scope.Subjects.length; i++) {
  $scope.subjectModel[$scope.Subjects[i].SubjectId] 
  =  $scope.SubjectIds.indexOf($scope.Subjects[i].SubjectId) > -1 ? true:false;
}

第二：使用以下修改代码更改编辑功能是否选中复选框：

for (var k = 0; k < $scope.subjectModel.length; k++) {
        if ($scope.subjectModel[k]) {
            checkedSubjects.push(k);
        }
    }

第三：动态加载数据，需要调用$scope.updateChkBox();after$scope.Subjects = pl.data;修改后的loadSubjects函数如下：

function loadSubjects() {
        var promiseGet = crudService.getSubjects();


        promiseGet.then(function (pl) { 
                $scope.Subjects = pl.data;
                $scope.updateChkBox();
            },
            function (errorPl) {
                $log.error('failure loading Subjects', errorPl);
            });


 }

请检查最终的工作代码片段：

<html>
    <head>
        <title></title>


        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


        <script>

            var myApp2=angular.module("myModule2",[]);

            myApp2.controller("controller2",function($scope){

$scope.message="test";

$scope.Subjects=[
    {SubjectId:1,SubjectName:"Bangla"},
    {SubjectId:2,SubjectName:"English"},
    {SubjectId:3,SubjectName:"Math"},
    {SubjectId:4,SubjectName:"Science"},
    {SubjectId:5,SubjectName:"BGS"},
    {SubjectId:6,SubjectName:"Religious"},
    
    
];




$scope.SubjectIds=[2,5];



$scope.subjectModel = [];
$scope.updateChkBox = function (){
  for(var i = 0; i < $scope.Subjects.length; i++) {
    $scope.subjectModel[$scope.Subjects[i].SubjectId] 
    =  $scope.SubjectIds.indexOf($scope.Subjects[i].SubjectId) > -1 ? true:false;
  }
}
$scope.updateChkBox();

 function loadSubjects() {
        var promiseGet = crudService.getSubjects();
 
 
        promiseGet.then(function (pl) { 
                $scope.Subjects = pl.data;
                $scope.updateChkBox();
            },
            function (errorPl) {
                $log.error('failure loading Subjects', errorPl);
            });
 
 
 }

$scope.edit = function () {

    var checkedSubjects = [];
    for (var k = 0; k < $scope.subjectModel.length; k++) {
        if ($scope.subjectModel[k]) {
            checkedSubjects.push(k);
        }
    }

    //do your stuff with the ids in `checkedBooks`
       alert(checkedSubjects);
}

});



        
        </script>
       
    </head>

    <body ng-app="myModule2" ng-controller="controller2">

    


        
    Subjects:
    <div ng-repeat="subj in Subjects">

        <input type="checkbox" ng-model="subjectModel[subj.SubjectId]" ng-checked="SubjectIds.indexOf(subj.SubjectId)!=-1"/>{{subj.SubjectName}}



    </div>

    <div>

        <input type="button" class="btn btn-warning" value="Update" id="updt" ng-click="edit()"/>
    </div>



    </body>




</html>

于 2018-05-02T05:59:12.147 回答