<div class="page page-material">




  <!-- page header -->
  <div class="pageheader">

    <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2>

    <div class="page-bar">

      <ul class="page-breadcrumb">
        <li>
          <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a>
        </li>
        <li>
          <a href="javascript:;">Material UI</a>
        </li>
        <li>
          <a ui-sref="app.material.radio-button">{{page.title}}</a>
        </li>
      </ul>

    </div>

  </div>
  <!-- /page header -->






  <!-- page content -->
  <div class="pagecontent">

    <div flex layout="column">

      <section class="demo-container md-whiteframe-z1">

        <md-toolbar>
          <div class="md-toolbar-tools">
            <md-button class="md-icon-button" aria-label="Settings">
              <md-icon md-font-icon="zmdi zmdi-menu"></md-icon>
            </md-button>
            <h2>
              <span>Basic Usage</span>
            </h2>
            <span flex></span>
            <md-menu md-position-mode="target-right target">
              <md-button aria-label="More" class="md-icon-button" ng-click="$mdOpenMenu()">
                <md-icon md-menu-origin md-font-icon="zmdi zmdi-more-vert"></md-icon>
              </md-button>
              <md-menu-content width="4">
                <md-menu-item ng-repeat="item in [1, 2, 3]">
                  <md-button>
                    Option {{item}}
                  </md-button>
                </md-menu-item>
              </md-menu-content>
            </md-menu>
          </div>
        </md-toolbar>

        <md-content class="md-padding radioButtondemoBasicUsage">

          <form ng-submit="submit()">
            <p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>
            <md-radio-group ng-model="data.group1">
              <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
              <md-radio-button value="Banana"> Banana </md-radio-button>
              <md-radio-button value="Mango">Mango</md-radio-button>
            </md-radio-group>
            <hr />
            <p>Selected Value: <span class="radioValue">{{ data.group2 }}</span></p>
            <md-radio-group ng-model="data.group2" class="md-primary">
              <md-radio-button ng-repeat="d in radioData"
                               ng-value="d.value"
                               ng-disabled=" d.isDisabled "
                               ng-class="{'md-align-top-left': $index==1}" >
                {{ d.label }}<br/>
                <span class="ipsum"
                      ng-if="$index == 1">
                  Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
                  Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
                  sit amet dapibus tortor ligula non nibh.
                </span>
              </md-radio-button>
            </md-radio-group>
            <p>
              <md-button class="md-raised" ng-click="addItem()" type="button">Add</md-button>
              <md-button class="md-raised" ng-click="removeItem()" type="button">Remove</md-button>
            </p>
            <hr />
            <p style="margin-bottom: 0;">Graphic radio buttons need to be labeled with the <code>aria-label</code> attribute.</p>
            <p style="margin-top: 0;">Selected Avatar: <span class="radioValue">{{ data.group3 }}</span></p>
            <md-radio-group ng-model="data.group3">
              <md-radio-button ng-repeat="it in avatarData"
                               ng-value="it.value"
                               aria-label="{{it.title}}">
                <md-icon md-svg-icon="{{it.id}}"></md-icon>
              </md-radio-button>
            </md-radio-group>
          </form>

        </md-content>

      </section>

    </div>


  </div>
  <!-- /page content -->




</div>
