zoukankan      html  css  js  c++  java
  • Angular--CheckBox,checkbox多选,保存的时候用逗号隔开

    1.HTML代码

    <div class="checkbox">
        <label ng-repeat="la in languageList track by $index">
            <input type="checkbox" name="LanguageName"  ng-checked="isCheckSelected(la.LCode)" ng-click="updateSelection($event,$index,la.LCode,la.LName)">
            <span>{{la.LName}}</span>
        </label>
    </div>

    2.JavaScript(angular)代码

    $scope.Model.LanguageCodes = "0";
    $scope.Model.LanguageNames = "中文版";
    $scope.languageList = [{ LCode: '0', LName: '中文版' }, { LCode: '1', LName: '英文版' }];
    $scope.isCheckSelected = function (code) {
        var isCheck = false;
        var lcodelist = $scope.Model.LanguageCodes.split(',');
        angular.forEach(lcodelist, function (value) {
            if (value == code) {
                isCheck = true;
            }
        });
        return isCheck;
    }
    var updateSelected = function (action, code,name) {
        if (action === 'add') {
            if ($scope.Model.LanguageCodes == undefined || $scope.Model.LanguageCodes=='') {
                $scope.Model.LanguageCodes += code;
            } else {
                $scope.Model.LanguageCodes += ',' + code;
            }
            angular.forEach($scope.languageList, function (value) {
                if (value.LCode === code) {
                    if ($scope.Model.LanguageNames == undefined || $scope.Model.LanguageNames == '') {
                        $scope.Model.LanguageNames += value.LName;
                    } else {
                        $scope.Model.LanguageNames += ',' + value.LName;
                    }
                }
            })
        }
        if (action === 'remove') {
            var lcodeList = $scope.Model.LanguageCodes.split(',');
            $scope.Model.LanguageCodes = '';
            angular.forEach(lcodeList, function (value, $index) {
                if (value != code) {
                    if ($scope.Model.LanguageCodes == undefined || $scope.Model.LanguageCodes == '') {
                        $scope.Model.LanguageCodes += value;
                    }
                    else {
                        $scope.Model.LanguageCodes += ',' + value;
                    }
                }
            });
            var lnameList = $scope.Model.LanguageNames.split(',');
            $scope.Model.LanguageNames = '';
            angular.forEach(lnameList, function (value, $index) {
                if (value != name) {
                    if ($scope.Model.LanguageNames == undefined || $scope.Model.LanguageNames == '') {
                        $scope.Model.LanguageNames += value;
                    } else {
                        $scope.Model.LanguageNames += ',' + value.LName;
                    }
                }
            });
        }
    }
    $scope.updateSelection = function ($event, index,code,name) {
        var checkBox = $event.target;
        var action = (checkBox.checked ? 'add' : 'remove');
        updateSelected(action, code,name);
    }

    3.页面效果

  • 相关阅读:
    风机故障诊断分析方案
    sklearn机器学习的监督学习的各个模型主要调参参数
    由于下载fiddler导致,有网而网页无法访问,解决方法是导入fiddler的代理证书,具体步骤参考下面博客
    主题建模:隐含狄利克雷分布
    pytorch坑
    sklearn学习总结
    C# 串口模拟键盘输入
    C#求 鸡兔同笼 已知鸡兔总头数,总脚数为x,求鸡兔各多少只?
    C#图像显示实现拖拽、锚点缩放功能[转 有耐心的小王]
    C# WinForm窗体及其控件自适应各种屏幕分辨率
  • 原文地址:https://www.cnblogs.com/JioNote/p/11678860.html
Copyright © 2011-2022 走看看