使用Bootstrap Glyphicons创建复选框功能

Creating Checkbox functionality using Bootstrap Glyphicons

本文关键字：复选框 功能 创建 Glyphicons Bootstrap 使用      更新时间：2023-09-26

我构建了一组很棒的引导程序图标，它们的作用就像单选按钮。我需要对复选框行为做同样的事情，允许选择和存储多个选项。我似乎不知道该怎么做。

HTML

<h1>AUTOMATIC TASKS
  <ul class="nav nav-pills nav-stacked user-dems">
    <li ng-repeat="optionText in type.options" class="underline"><a href="#" ng-click="selectType(optionText)" class="queue-type queue-text-margin"><span ng-class="{&quot;glyphicon-ok&quot;:type.selected===optionText,&quot;glyphicon-unchecked&quot;:type.selected!==optionText}" class="glyphicon glyphicon-ok queue-box-padding"></span>{{optionText}}</a></li>
  </ul>
</h1>

控制器

angular.module('app').controller('mvQueueListCtrl', function($scope, mvQueue) {
 ........
 ........
  $scope.selectType = function(opt){
      $scope.type.selected = opt
  },

  $scope.type = {
      options: ['Fax', 'Physical', 'Digital'],
      //selected: 'None'
      selected: 'Fax'
    },

 ..........
 ..........
 ..........
}
);

您可以稍微更改视图模型，以指示它是否已被选中，因此将其改为对象数组，而不是基元数组：-

$scope.type = {
   options: [{name:'Fax', selected:true},
         {name:'Physical', selected:false}, 
         {name:'Digital', selected:false}],
};

并更新处理程序以切换复选标记。

 $scope.selectType = function(opt){
      opt.selected = !opt.selected;
  };

只要稍微改变一下你的ng-repeat。

  • 单击ng-click="selectType(option)"时传递选项
  • 将ng-class简化为ng-class="{'true' : 'glyphicon-ok', false:'glyphicon-unchecked'}[option.selected]"
<li ng-repeat="option in type.options track by $index">
      <a href="#" ng-click="selectType(option)" class="queue-type queue-text-margin">
        <span ng-class="{'true' : 'glyphicon-ok', false:'glyphicon-unchecked'}[option.selected]" 
         class="glyphicon glyphicon-ok queue-box-padding"></span>{{option.name}}
      </a>
</li>

演示

相关文章：