<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
  <link rel="stylesheet" href="dist/angular-bootstrap-radio.css" />
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <!-- <script src="dist/angular-bootstrap-radio.min.js"></script> -->
  <script src="src/angular-bootstrap-radio.js"></script>
  <script src="app.js"></script>
</head>
<body ng-app="angular-bootstrap-radio-test" ng-controller="index">

<table class="table" style="width:800px;">
  <tr>
    <th style="width:150px;">
      Example
    </th>
    <th style="width:20px;"></th>
    <th style="width:100px;">
      Value
    </th>
    <th style="width:150px;"></th>
    <th>
      Code
    </th>
    <th></th>
  </tr>

  <tr>
    <td>
      Minimal example<br />
      initial = &quot;&quot; (empty)
    </td>
    <td>
      <radio config="faConfig" id="radio0First" ng-model="radioModel[0]" value="first"></radio>
      <radio config="faConfig" id="radio0Second" ng-model="radioModel[0]" value="second"></radio>
      <radio config="faConfig" id="radio0Third" ng-model="radioModel[0]" value="third"></radio>
    </td>
    <td>
      <span id="radioModel0" ng-bind="radioModel[0]">
    </td>
    <td>
      <button id="radioButton0None" style="width:150px;" ng-click="radioModel[0] = ''">
        Set to empty
      </button><br />
      <button id="radioButton0First" style="width:150px;" ng-click="radioModel[0] = 'first'">
        Set to first
      </button><br />
      <button id="radioButton0Second" style="width:150px;" ng-click="radioModel[0] = 'second'">
        Set to second
      </button><br/ >
      <button id="radioButton0Second" style="width:150px;" ng-click="radioModel[0] = 'third'">
        Set to third
      </button>
    </td>
    <td style="width:300px;">

<pre>&lt;radio
    ng-model=&quot;radioModel[0]&quot;
    value=&quot;first&quot;
&gt;&lt;/radio&gt;
&lt;radio
    ng-model=&quot;radioModel[0]&quot;
    value=&quot;second&quot;
&gt;&lt;/radio&gt;
&lt;radio
    ng-model=&quot;radioModel[0]&quot;
    value=&quot;third&quot;
&gt;&lt;/radio&gt;</pre>

    </td>
  </tr>

  <!-- <tr>
    <td>
      Example with custom name attribute
    </td>
    <td>
      <radio config="faConfig" id="radio1" ng-model="radioModel[1]" name="custom-name"></radio>
    </td>
    <td>
      <span id="radioModel1" ng-bind="radioModel[1]"></span>
    </td>
    <td>
      <button id="radioButton1true" style="width:150px;" ng-click="radioModel[1] = true">
        Set to true
      </button><br>
      <button id="radioButton1false" style="width:150px;" ng-click="radioModel[1] = false">
        Set to false
      </button>
    </td>
    <td style="width:300px;">

<pre>&lt;radio
    ng-model="radioModel[1]"
    <b>name="custom-name"</b>
&gt;&lt;/radio&gt</pre>

    </td>
  </tr>

  <tr>
    <td>
      Example with custom true value
    </td>
    <td>
      <radio config="faConfig" id="radio2" ng-model="radioModel[2]" ng-true-value="The Truth"></radio>
    </td>
    <td>
      <span id="radioModel2" ng-bind="radioModel[2]"></span>
    </td>
    <td>
      <button id="radioButton2true" style="width:150px;" ng-click="radioModel[2] = true">
        Set to true
      </button><br>
      <button id="radioButton2false" style="width:150px;" ng-click="radioModel[2] = false">
        Set to false
      </button><br>
      <button id="radioButton2truth" style="width:150px;" ng-click="radioModel[2] = 'The Truth'">
        Set to "The Truth"
      </button>
    </td>
    <td style="width:300px;">

<pre>&lt;radio
    ng-model="radioModel[2]"
    <b>ng-true-value="The Truth"</b>
&gt;&lt;/radio&gt</pre>

    </td>
  </tr>

  <tr>
    <td>
      Example with custom false value
    </td>
    <td>
      <radio config="faConfig" id="radio3" ng-model="radioModel[3]" ng-false-value="The Untruth"></radio>
    </td>
    <td>
      <span id="radioModel3" ng-bind="radioModel[3]"></span>
    </td>
    <td>
      <button id="radioButton3true" style="width:150px;" ng-click="radioModel[3] = true">
        Set to true
      </button><br>
      <button id="radioButton3false" style="width:150px;" ng-click="radioModel[3] = false">
        Set to false
      </button><br>
      <button id="radioButton3untruth" style="width:150px;" ng-click="radioModel[3] = 'The Untruth'">
        Set to "The Untruth"
      </button>
    </td>
    <td style="width:300px;">

<pre>&lt;radio
    ng-model="radioModel[3]"
    <b>ng-false-value="The Untruth"</b>
&gt;&lt;/radio&gt</pre>

    </td>
  </tr>

  <tr>
    <td>
      Example with custom true and false value
    </td>
    <td>
      <radio config="faConfig" id="radio4" ng-model="radioModel[4]" ng-true-value="The Truth" ng-false-value="The Untruth"></radio>
    </td>
    <td>
      <span id="radioModel4" ng-bind="radioModel[4]"></span>
    </td>
    <td>
      <button id="radioButton4true" style="width:150px;" ng-click="radioModel[4] = true">
        Set to true
      </button><br>
      <button id="radioButton4false" style="width:150px;" ng-click="radioModel[4] = false">
        Set to false
      </button><br>
      <button id="radioButton4truth" style="width:150px;" ng-click="radioModel[4] = 'The Truth'">
        Set to "The Truth"
      </button><br>
      <button id="radioButton4untruth" style="width:150px;" ng-click="radioModel[4] = 'The Untruth'">
        Set to "The Untruth"
      </button>
    </td>
    <td style="width:300px;">

<pre>&lt;radio
    ng-model="radioModel[4]"
    <b>ng-true-value="The Truth"</b>
    <b>ng-false-value="The Untruth"</b>
&gt;&lt;/radio&gt</pre>

    </td>
  </tr>

  <tr>
    <td>
      Example with change listener when clicked
    </td>
    <td>
      <radio config="faConfig" id="radio5" ng-model="radioModel[5]" ng-change="onChange()"></radio>
    </td>
    <td>
      <span id="radioModel5" ng-bind="radioModel[5]"></span><br>
      <br>
      Clicks: <span id="changes" ng-bind="changes"></span>
    </td>
    <td>
      <button id="radioButton5true" style="width:150px;" ng-click="radioModel[5] = true">
        Set to true
      </button><br>
      <button id="radioButton5false" style="width:150px;" ng-click="radioModel[5] = false">
        Set to false
      </button>
    </td>
    <td style="width:300px;">

<pre>&lt;radio
    ng-model="radioModel[5]"
    <b>ng-change="onChange()"</b>
&gt;&lt;/radio&gt</pre>

    </td>
  </tr>

  <tr>
    <td>
      Example disabled radio
    </td>
    <td>
      <radio config="faConfig" id="radio6" ng-model="radioModel[6]" ng-disabled="isDisabled === true"></radio>
    </td>
    <td>
      <span id="radioModel6" ng-bind="radioModel[6]"></span>
    </td>
    <td>
      <button id="radioButton6true" style="width:150px;" ng-click="radioModel[6] = true">
        Set to true
      </button><br>
      <button id="radioButton6false" style="width:150px;" ng-click="radioModel[6] = false">
        Set to false
      </button>
      <button id="radioButton6enable" style="width:150px;" ng-click="isDisabled = false">
        Enable
      </button>
      <button id="radioButton6disable" style="width:150px;" ng-click="isDisabled = true">
        Disable
      </button>
    </td>
    <td style="width:300px;">

<pre>&lt;radio
    ng-model="radioModel[6]"
    <b>ng-disabled="isDisabled === true"</b>
&gt;&lt;/radio&gt</pre>

    </td>
  </tr> -->

  <tr>
    <td>
      Different Sizes (normal, large, larger, largest)
    </td>
    <td></td>
    <td colspan="2">
      <radio config="faConfig" id="radio7a" ng-model="radioModel[4]" value="top"></radio>
      <radio config="faConfig" id="radio7b" class="large" ng-model="radioModel[4]" value="top"></radio>
      <radio config="faConfig" id="radio7c" class="larger" ng-model="radioModel[4]" value="top"></radio>
      <radio config="faConfig" id="radio7d" class="largest" ng-model="radioModel[4]" value="top"></radio>
      <br><br>
      <radio config="faConfig" id="radio8a" ng-model="radioModel[4]" value="bottom"></radio>
      <radio config="faConfig" id="radio8b" class="large" ng-model="radioModel[4]" value="bottom"></radio>
      <radio config="faConfig" id="radio8c" class="larger" ng-model="radioModel[4]" value="bottom"></radio>
      <radio config="faConfig" id="radio8d" class="largest" ng-model="radioModel[4]" value="bottom"></radio>
    </td>

    <td style="width:300px;">

<pre>&lt;radio
    ng-model="radioModel[4]" &hellip;
&gt;&lt;/radio&gt;
&lt;radio class="<b>large</b>"
    ng-model="radioModel[4]" &hellip;
&gt;&lt;/radio&gt;
&lt;radio class="<b>larger</b>"
    ng-model="radioModel[4]" &hellip;
&gt;&lt;/radio&gt;
&lt;radio class="<b>largest</b>"
    ng-model="radioModel[4]" &hellip;
&gt;&lt;/radio&gt;</pre>

    </td>
  </tr>

  <tr>
    <td>
      Different Styles (normal, primary, success, info, warning, danger)
    </td>
    <td></td>
    <td>
      default:<br><br><br>

      primary:<br><br><br>

      success:<br><br><br>

      info:<br><br><br>

      warning:<br><br><br>

      danger:
    </td>
    <td>
      <radio config="faConfig" id="radio9a" ng-model="radioModel[5]" value="left"></radio>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <radio config="faConfig" id="radio10a" ng-model="radioModel[5]" value="right"></radio><br><br><br>

      <radio config="faConfig" id="radio9b" class="btn-primary" ng-model="radioModel[5]" value="left"></radio>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <radio config="faConfig" id="radio10b" class="btn-primary" ng-model="radioModel[5]" value="right"></radio><br><br><br>

      <radio config="faConfig" id="radio9c" class="btn-success" ng-model="radioModel[5]" value="left"></radio>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <radio config="faConfig" id="radio10c" class="btn-success" ng-model="radioModel[5]" value="right"></radio><br><br><br>

      <radio config="faConfig" id="radio9d" class="btn-info" ng-model="radioModel[5]" value="left"></radio>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <radio config="faConfig" id="radio10d" class="btn-info" ng-model="radioModel[5]" value="right"></radio><br><br><br>

      <radio config="faConfig" id="radio9e" class="btn-warning" ng-model="radioModel[5]" value="left"></radio>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <radio config="faConfig" id="radio10e" class="btn-warning" ng-model="radioModel[5]" value="right"></radio><br><br><br>

      <radio config="faConfig" id="radio9f" class="btn-danger" ng-model="radioModel[5]" value="left"></radio>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <radio config="faConfig" id="radio10f" class="btn-danger" ng-model="radioModel[5]" value="right"></radio>
    </td>

    <td style="width:300px;">

<pre>&lt;radio
    ng-model="radioModel[5]" &hellip;
&gt;&lt;/radio&gt;
&lt;radio <b>class="btn-primary"</b>
    ng-model="radioModel[5]" &hellip;
&gt;&lt;/radio&gt;
&lt;radio <b>class="btn-success"</b>
    ng-model="radioModel[5]" &hellip;
&gt;&lt;/radio&gt;
&lt;radio <b>class="btn-info"</b>
    ng-model="radioModel[5]" &hellip;
&gt;&lt;/radio&gt;
&lt;radio <b>class="btn-warning"</b>
    ng-model="radioModel[5]" &hellip;
&gt;&lt;/radio&gt;
&lt;radio <b>class="btn-danger"</b>
    ng-model="radioModel[5]" &hellip;
&gt;&lt;/radio&gt;</pre>
    </td>
  </tr>

  <tr>
    <td colspan="5">
      <b>app.js:</b>
      <pre>
angular.module("angular-bootstrap-radio-test", ["ui.radio"])
.controller("index", function($scope) {
  $scope.radioModel = [
    "", "second", "third", "fourth", "top", "left"
  ];

  $scope.changes = 0;
  $scope.onChange = function() {
    $scope.changes++;
  };

  $scope.isDisabled = false;

  $scope.faConfig = {
    iconClass: 'fa fa-circle'
  };

});
</pre>
    </td>
  </tr>
</table>

</body>
</html>