pip-webui/pip-webui-css/samples/material/select.html

HTML5 UI for LOB applications

<p class="text-title h72 m0 bm8 layout-row layout-align-start-center">
    Select
</p>

<p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">Without label</p>
<md-select ng-model="overall.selectResult" class="w-stretch tm0 bm16">

    <md-option ng-value="opt" ng-repeat="opt in overall.dataCollection">
        <span class="flex">{{ opt.name }}</span>
    </md-option>
</md-select>

<p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">With label</p>

<md-input-container>
    <label>Some label</label>
    <md-select ng-model="ctrl.userState">
        <md-option ng-value="opt" ng-repeat="opt in overall.dataCollection">
            <span class="flex">{{ opt.name }}</span>
        </md-option>
    </md-select>
</md-input-container>

<p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">Validation select</p>

<p>Note that invalid styling only applies if invalid and dirty</p>

<md-input-container class="md-block">
    <label>Favorite Number</label>
    <md-select name="myModel" ng-model="myModel" required>
        <md-option value="1">One</md-option>
        <md-option value="2">Two</md-option>
    </md-select>
    <div class="errors" ng-messages="myForm.myModel.$error" ng-if="myForm.$dirty">
        <div ng-message="required">Required</div>
    </div>
</md-input-container>

<md-button ng-click="clearValue()" ng-disabled="!myModel" style="margin-right: 20px;">Clear</md-button>