使用Bootstrap Glyphicons创建自定义单选按钮?

时间:2014-10-10 21:41:09

标签: javascript angularjs twitter-bootstrap twitter-bootstrap-3 angular-ui

我的第一个问题太复杂了,所以我决定把它分成小块。 有没有办法让bootstrap和angular一起工作来改变glyphicons? 我试图让这些像Radio Buttons一样。

<div class="container">
  <div class="container-fluid">
    <div class="row uglytabs">
        <div class="main-queue-title">
          <h1>QUEUE TYPE</h1>
        </div>
        <ul class="nav nav-pills nav-stacked user-dems">
          <li class="underline"><a href="#" class="queue-type"><span ng-click="checked(queue)" class="glyphicon queue-box-padding" ng-class="queueDetail == queue ? 'glyphicon-ok' : 'glyphicon-unchecked'"></span>Fax Driven</a></li>
          <li class="underline"><a href="#" class="queue-type queue-text-margin"><span class="glyphicon glyphicon-unchecked queue-box-padding"></span>Digital Driven</a></li>
          <li class="underline"><a href="#" class="queue-type queue-text-margin"><span class="glyphicon glyphicon-unchecked queue-box-padding"></span>Physical Driven</a></li>
        </ul>
        <div class="main-queue-title">
          <h1>GROUPING</h1>
        </div>
        <ul class="nav nav-pills nav-stacked user-dems">
          <li class="underline"><a href="#" class="queue-type queue-text-margin"><span class="glyphicon glyphicon-ok queue-box-padding"></span>None</a></li>
          <li class="underline"><a href="#" class="queue-type queue-text-margin"><span class="glyphicon glyphicon-unchecked queue-box-padding"></span>Group by Drug</a></li>
          <li class="underline"><a href="#" class="queue-type queue-text-margin"><span class="glyphicon glyphicon-unchecked queue-box-padding"></span>Group by Patient</a></li>
        </ul>
        <div class="main-queue-title">
          <h1>AUTOMATIC TASKS</h1>
        </div>
        <ul class="nav nav-pills nav-stacked user-dems">
          <li class="underline"><a href="#" class="queue-type queue-text-margin"><span class="glyphicon glyphicon-ok queue-box-padding"></span>Pharmacy Verification</a></li>
          <li class="underline"><a href="#" class="add-new-auto-queue"><span class="glyphicon glyphicon-plus blue"></span><span class="add-new-auto">Add New</span></a></li>
        </ul>
        <p></p>
        <div class="user-options"><a class="user-delete">Delete Queue </a></div>
      </div>
    </div>
  </div>

插入的链接

http://plnkr.co/edit/j8U9xm7t1Ggq9JxnRbcN?p=preview

0 个答案:

没有答案