Question

我目前正在开展一个项目，该项目要求能够设定一个特定任务发生的星期几的时间表。我提出的内容似乎足够功能（小提琴here）：

HTML：

<div ng-controller="TestCtrl">
  <fieldset>
    <div class="form-group">
      <div>
        <h6><b>Weekly:</b></h6>
      </div>
      <div class="btn-group btn-group-sm" data-toggle="buttons">
        <label class="btn btn-info" ng-class="{'active': currentSchedule.monday}">
          <input ng-model="currentSchedule.monday" type="checkbox" checked="{{currentSchedule.monday}}"> Monday
        </label>
        <label class="btn btn-info" ng-class="{'active': currentSchedule.tuesday}">
          <input ng-model="currentSchedule.tuesday" type="checkbox" checked="{{currentSchedule.tuesday}}"> Tuesday
        </label>
        <label class="btn btn-info" ng-class="{'active': currentSchedule.wednesday}">
          <input ng-model="currentSchedule.wednesday" type="checkbox" checked="{{currentSchedule.wednesday}}"> Wednesday
        </label>
        <label class="btn btn-info" ng-class="{'active': currentSchedule.thursday}">
          <input ng-model="currentSchedule.thursday" type="checkbox" checked="{{currentSchedule.thursday}}"> Thursday
        </label>
        <label class="btn btn-info" ng-class="{'active': currentSchedule.friday}">
          <input ng-model="currentSchedule.friday" type="checkbox" checked="{{currentSchedule.friday}}"> Friday
        </label>
        <label class="btn btn-info" ng-class="{'active': currentSchedule.saturday}">
          <input ng-model="currentSchedule.saturday" type="checkbox" checked="{{currentSchedule.saturday}}"> Saturday
        </label>
        <label class="btn btn-info" ng-class="{'active': currentSchedule.sunday}">
          <input ng-model="currentSchedule.sunday" type="checkbox" checked="{{currentSchedule.sunday}}"> Sunday
        </label>
      </div>
    </div>
  </fieldset>
</div>

JavaScript的：

angular.module('testApp', []).controller('TestCtrl', ['$scope', function($scope) {
  $scope.currentSchedule = {
    monday: true,
    tuesday: true,
    wednesday: true,
    thursday: true,
    friday: false,
    saturday: false,
    sunday: true
  };
}])

CSS：

.btn-info.active {
  background-color: limegreen;
}

然而，我的客户看到了漂亮的小切换按钮，侧面有红色或绿色线条，具体取决于它是否有效。

如果我没有找到它，我可以找到他所寻找的按钮的大量例子，但是，现在，我没有运气。

有没有人知道这些是否可以通过插件或类似内容获得？

更改Bootstrap 3按钮组

0 个答案: