AngularJS实现多选按钮组

来源：互联网发布：oracle数据库账号密码编辑：程序博客网时间：2024/06/05 10:03

使用AngularJS实现多选按钮组，按钮样式使用bootstrap，效果图如下：

html页面代码：

<div><button class= "btn btn-default est-lab" ng-class="{true: 'selecte-on', false: 'selecte-off'}[vm.reasonStr.indexOf('a') > -1]" ng-click="choseReason('a');">工作人员状态</button><button class= "btn btn-default est-lab" ng-class="{true: 'selecte-on', false: 'selecte-off'}[vm.reasonStr.indexOf('b') > -1]" ng-click="choseReason('b');">信访事项转交效率</button><button class= "btn btn-default est-lab" ng-class="{true: 'selecte-on', false: 'selecte-off'}[vm.reasonStr.indexOf('c') > -1]" ng-click="choseReason('c');">信访部门协调督办工作</button><button class= "btn btn-default est-lab" ng-class="{true: 'selecte-on', false: 'selecte-off'}[vm.reasonStr.indexOf('d') > -1]" ng-click="choseReason('d');">信访部门答疑解惑工作</button><button class= "btn btn-default est-lab" ng-class="{true: 'selecte-on', false: 'selecte-off'}[vm.reasonStr.indexOf('e') > -1]" ng-click="choseReason('e');">法规政策宣传解释不到位</button><button class= "btn btn-default est-lab" ng-class="{true: 'selecte-on', false: 'selecte-off'}[vm.reasonStr.indexOf('f') > -1]" ng-click="choseReason('f');">不依法依规处理问题</button><button class= "btn btn-default est-lab" ng-class="{true: 'selecte-on', false: 'selecte-off'}[vm.reasonStr.indexOf('g') > -1]" ng-click="choseReason('g');">办理过程不公开透明</button><button class= "btn btn-default est-lab" ng-class="{true: 'selecte-on', false: 'selecte-off'}[vm.reasonStr.indexOf('h') > -1]" ng-click="choseReason('h');">合理诉求未解决</button><button class= "btn btn-default est-lab" ng-class="{true: 'selecte-on', false: 'selecte-off'}[vm.reasonStr.indexOf('i') > -1]" ng-click="choseReason('i');">处理意见未落实到位</button></div>

js代码：

var vm = $scope.vm = {    reason: "",    reasonStr: ""};

$scope.choseReason = function (reason) {        if(vm.reasonStr.toString().indexOf(reason) > -1){            vm.reasonStr = vm.reasonStr.toString().replace(reason,"");        }        else{            if(vm.reasonStr.length < 3){            vm.reasonStr = vm.reasonStr + reason;}            else{                alert("最多只能选中3个标签");            }        }}

css代码：

.selecte-off{    color:#babaca;    border-color: #cacacd;}

.selecte-on{    color: #ffba41;    border-color: #ffba41 ;}

0 0