0

My first question was too complex so I decided to break it into smaller pieces. Is there a way to have bootstrap and angular work together to change out glyphicons? I am trying to get these to act like 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>

A link to the plunk

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

Chase Nelson
  • 29
  • 9
  • 1
    You can easily change the class (and therefore the icon) using `ng-class` – JoseM Oct 10 '14 at 21:51
  • 1
    Check out this question on all of things you can do with styles: http://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in-angularjs – Matthew Green Oct 10 '14 at 21:55
  • I updated your plunk: http://plnkr.co/edit/3BHjmpTzvxqR0pzktGCP?p=preview – JoseM Oct 10 '14 at 22:16
  • Are you looking to do something like this: http://plnkr.co/edit/YjDurdXBmT3vtjDgHA7K?p=preview – jme11 Oct 10 '14 at 23:58
  • Thanks Tremendously JoseM. This is precisely what I was trying to do!. If you were to put it as an answer and not a comment I would accept it as the answer to my question. – Chase Nelson Oct 11 '14 at 02:10

0 Answers0