checkbox重渲染，编辑后重获取选中的值

清疚 2023-06-10 14:21 12阅读 0赞

# checkbox重渲染，编辑后重获取选中的值 #

[https://www.jianshu.com/p/89e17612e58d][https_www.jianshu.com_p_89e17612e58d]

做表单的checkbox的时候一般有以下几种情况：

1.  **只保存选中值**：前台只获取选中的checkbox的值，然后传递给后台`保存`。
2.  **只渲染**：前台调接口，从后台获取选中的checkbox的值，然后在前台页面上`渲染`，设置用户`不可编辑`。
3.  **重渲染、二次编辑、重保存**：前台先从后台获取checkbox选中的值，然后`渲染`到前台，同时用户可进行`编辑`，编辑完之后，传递用户编辑后选中的checkbox的值给后台`保存`。

--------------------

现在碰到的就是用户将表单`填写一半`，点击`暂存`，前台将用户`填写过的字段数据`，传递给后台，`存储`到表里面，然后用户`换笔记本`或`重新打开浏览器`，前台掉接口，`渲染`未完成的表单，用户`继续填写未完成`的表单。

简单说就是`第三种`情况，**保存--重渲染--二次编辑--更新保存**

下面是个简单的栗子：

*  一开始加载，`默认`所有的checkbox`都不选中`。
 *  掉接口，`模拟`后台返回的`数据`，判断数据是否`不为null`、`不为undefined`、`不为空字符串“”`，然后`字符串转数组`。
 *  `遍历`数据，将已选中的值，ifChecked设置为true。
 *  每个checkbox添加`click`事件，将选中的值，抓取出来。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ng-checked</title>
        <script type="text/javascript" src="../libs/angular/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp">
            <div ng-controller="myCtrl">
                <span style="display: inline-block;border: 1px solid #ccc;padding:10px" >
                    <label ng-repeat="item in dataset">
                        <input type="checkbox" name="preApp" 
                            ng-model="item.ifChecked"
                            ng-click="selectCheck()">{
       {item.name}}
                    </label>
                     
                </span>
            </div>
        </div>
        <script type="text/javascript">
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope){
                var self = this;
                // 默认全不选
                $scope.dataset=[{"name":"苹果","ifChecked":false},
                                {"name":"香蕉","ifChecked":false},
                                {"name":"栗子","ifChecked":false},
                                {"name":"西瓜","ifChecked":false}];
                // 调接口，重渲染checkbox，模拟后台数据str
                    console.log("默认全不选的dataset------>"+JSON.stringify($scope.dataset));
                var str = "香蕉,栗子";
                // var str = null/undefined/"";
                var arr1 = str? str.split(","): [];
                    console.log("接口假数据str------>"+JSON.stringify(str));
                    console.log("假数据转数组arr1------>"+JSON.stringify(arr1));
                // 将后台返回的checkbox值选中
                for(var i = 0; i < arr1.length; i++){
                    for(var j = 0; j < $scope.dataset.length; j++){
                        if(arr1[i] == $scope.dataset[j].name){
                            $scope.dataset[j].ifChecked = true;
                        }
                    }
                };
                    console.log("处理选中后的dataset------>"+JSON.stringify($scope.dataset));
                // 触发click事件，重编辑后重保存选中的checkbox值
                $scope.selectCheck = function(){
                   // 每次click都要置空arr，否则它的值会有重复项
                    self.arr = [];
                    for(var i = 0; i < $scope.dataset.length; i++){
                        if($scope.dataset[i].ifChecked){
                            self.arr.push($scope.dataset[i].name);
                        }
                    }
                     console.log("转换成str，传递给后台------>",self.arr.join(","));
                    
                }               
            });
        </script>
    </body>
    </html>

**重渲染如下：**

重渲染，选中香蕉栗子

**重编辑如下：**

重编辑，获取选中的值

**注意：** 如果使用`ng-change`的话，重编辑存在一个问题：

*  默认`选中`的checkbox，重编辑，`第一次不会触发change事件`，之后都能触发。
 *  `未选中`的checkbox，重编辑`都可以`触发change事件。

--------------------

第二种：只渲染，设置不可编辑

只渲染的话，可以使用`ng-checked`设置是否选中，`ng-model`也可以。  
设置`不可编辑`的，设置`disabled="disabled"`属性，或者`ng-disabled='true'`

然后添加css样式，`cursor：not-allowed;`

<div ng-app="myApp">
            <div ng-controller="myCtrl">
                ng-model/disabled：<span style="display: inline-block;border: 1px solid #ccc;padding:10px" >
                    <label ng-repeat="item in dataset" style="cursor:not-allowed;">
                        <input type="checkbox" name="preApp" 
                            ng-model="item.ifChecked" disabled>{
       {item.name}}
                    </label>
                </span>
    
                <br>
                <br>
    
                ng-checked/ng-disabled：<span style="display: inline-block;border: 1px solid #ccc;padding:10px" >
                    <label ng-repeat="item in dataset" style="cursor:not-allowed;">
                        <input type="checkbox" name="preApp2" 
                            ng-checked="item.ifChecked"
                            ng-disabled="true">{
       {item.name}}
                    </label>
                </span>
            </div>
        </div>
        <script type="text/javascript">
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope){
                $scope.dataset=[{"name":"苹果","ifChecked":false},
                                {"name":"香蕉","ifChecked":true},
                                {"name":"栗子","ifChecked":false},
                                {"name":"火龙果","ifChecked":false},
                                {"name":"布林","ifChecked":true},
                                {"name":"哈密挂","ifChecked":false},
                                {"name":"西瓜","ifChecked":true}];
                
            });
        </script>

渲染，不可点击

[https_www.jianshu.com_p_89e17612e58d]: https://www.jianshu.com/p/89e17612e58d