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.页面效果

原文地址:https://www.cnblogs.com/JioNote/p/11678860.html