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