<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.checkbox">{{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 checkboxdemoBasicUsage checkboxDemo1"> <fieldset class="standard"> <legend>Using <code>ng-model</code></legend> <div layout="row" layout-wrap> <div flex="50"> <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1"> Checkbox 1: {{ data.cb1 }} </md-checkbox> </div> <div flex="50"> <md-checkbox ng-model="data.cb2" aria-label="Checkbox 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn md-align-top-left"> Checkbox 2 (md-warn) <br> <span class="ipsum"> 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> <br> {{ data.cb2 }} </md-checkbox> </div> <div flex="50"> <md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3"> Checkbox: Disabled </md-checkbox> </div> <div flex="50"> <md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true"> Checkbox: Disabled, Checked </md-checkbox> </div> <div flex="50"> <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary"> Checkbox (md-primary): No Ink </md-checkbox> </div> </div> </fieldset> </md-content> </section> <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>Syncing</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 checkboxdemoSyncing checkboxDemo1"> <div layout="row"> <div flex="50" flex-md="100" layout="column"> <fieldset class="standard" flex> <legend>Using <code>md-checkbox</code> with <code>ng-checked</code></legend> <div layout="row" layout-wrap> <div flex="50" ng-repeat="item in items"> <md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)"> {{ item }} <span ng-if="exists(item, selected)">selected</span> </md-checkbox> </div> </div> </fieldset> </div> <div flex="50" flex-md="100" layout="column"> <fieldset class="standard" flex> <legend>Using <code>&lt;input type="checkbox"&gt;</code></legend> <div layout="row" layout-wrap> <div ng-repeat="item in items" class="standard" flex="50"> <label> <input type="checkbox" ng-checked="exists(item, selected)" ng-click="toggle(item, selected)"> {{ item }} </label> </div> </div> </fieldset> </div> </div> <h2 class="md-title">Selected Items</h2> <code style="display: block; padding: 8px">{{selected | json}}</code> </md-content> </section> </div> </div> <!-- /page content --> </div>