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

最新推荐文章于 2023-12-01 14:46:39 发布

wwf1225

最新推荐文章于 2023-12-01 14:46:39 发布

阅读量737

点赞数

原文链接：https://www.jianshu.com/p/89e17612e58d

版权

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

https://www.jianshu.com/p/89e17612e58d

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

只保存选中值：前台只获取选中的checkbox的值，然后传递给后台保存。
只渲染：前台调接口，从后台获取选中的checkbox的值，然后在前台页面上渲染，设置用户不可编辑。
重渲染、二次编辑、重保存：前台先从后台获取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>
                 <!--  ng-checked="item.ifChecked"  -->
            </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>

渲染，不可点击

wwf1225

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
checkbox重渲染，编辑后重获取选中的值

checkbox重渲染，编辑后重获取选中的值https://www.jianshu.com/p/89e17612e58d做表单的checkbox的时候一般有以下几种情况：只保存选中值：前台只获取选中的checkbox的值，然后传递给后台保存。只渲染：前台调接口，从后台获取选中的checkbox的值，然后在前台页面上渲染，设置用户不可编辑。重渲染、二次编辑、重...
复制链接

扫一扫