mui/examples/angular/select.html at master · CssFormWork/mui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- for example only -->
    <script src="../assets/vendor/angular/1.5.3/angular.js"></script>
    <!-- end -->

    <link rel="stylesheet" type="text/css" href="../assets/mui/css/mui.css"/>
    <script src="../assets/mui/angular/mui-angular.js"></script>
    <script>
      var myApp = angular.module('myApp', ['mui']);

      myApp.controller('ExampleCtrl', function($scope) {
        $scope.valA = 'opt2';
        $scope.valB = 'opt4';
        $scope.valC = 'opt3';
      });
    </script>
  </head>
  <body ng-controller="ExampleCtrl">
    <mui-container>
      <h1>Select</h1>
      <mui-panel>
        <form method="get" action="test">
          <strong>Should have value "Option 2"</strong>
          <mui-select name="exampleA" ng-model="valA" label="Label 1">
            <mui-option label="Option 1" value="opt1"></mui-option>
            <mui-option label="Option 2" value="opt2"></mui-option>
            <mui-option label="Option 3" value="opt3"></mui-option>
            <mui-option label="Option 4" value="opt4"></mui-option>
            <mui-option label="Option 5" value="opt5"></mui-option>
            <mui-option label="Option 6" value="opt6"></mui-option>
            <mui-option label="Option 7" value="opt7"></mui-option>
            <mui-option label="Option 8" value="opt8"></mui-option>
          </mui-select>

          <strong>Should have value "Option 4" and use default UI</strong>
          <mui-select name="exampleB" ng-model="valB" use-default>
            <mui-option label="Option 1" value="opt1"></mui-option>
            <mui-option label="Option 2" value="opt2"></mui-option>
            <mui-option label="Option 3" value="opt3"></mui-option>
            <mui-option label="Option 4" value="opt4"></mui-option>
            <mui-option label="Option 5" value="opt5"></mui-option>
            <mui-option label="Option 6" value="opt6"></mui-option>
            <mui-option label="Option 7" value="opt7"></mui-option>
            <mui-option label="Option 8" value="opt8"></mui-option>
          </mui-select>

          <strong>Should have value "Option 3" and be disabled</strong>
          <mui-select name="exampleC" ng-model="valC" ng-disabled="true">
            <mui-option label="Option 1" value="opt1"></mui-option>
            <mui-option label="Option 2" value="opt2"></mui-option>
            <mui-option label="Option 3" value="opt3"></mui-option>
            <mui-option label="Option 4" value="opt4"></mui-option>
            <mui-option label="Option 5" value="opt5"></mui-option>
            <mui-option label="Option 6" value="opt6"></mui-option>
            <mui-option label="Option 7" value="opt7"></mui-option>
            <mui-option label="Option 8" value="opt8"></mui-option>
          </mui-select>

          <mui-button variant="raised">submit</mui-button>
        </form>
      </mui-panel>
    </mui-container>
  </body>
</html>