Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1 
<!-- BEGIN PAGE BREADCRUMB -->
2 
<ul class="page-breadcrumb breadcrumb">
3 
        <li>
4 
                <a href="#">Home</a><i class="fa fa-circle"></i>
5 
        </li>
6 
        <li class="active" data-ng-bind="$state.current.data.pageTitle">
7 
        </li>
8 
</ul>
9 
<!-- END PAGE BREADCRUMB -->
10 
 
11 
<!-- BEGIN MAIN CONTENT -->
12 
<div class="note note-success note-bordered">
13 
        <h3>UI Select</h3>
14 
        <p>
15 
                AngularJS-native version of Select2
16 
        </p>
17 
        <p>
18 
                For more info please check the <a href="https://github.com/angular-ui/ui-select">official github page</a>
19 
        </p>
20 
</div>
21 
<div class="row">
22 
        <div class="col-md-12">
23 
                <div class="portlet light" ng-controller="UISelectController">
24 
                        <div class="portlet-title">
25 
                                <div class="caption font-green-sharp">
26 
                                        <i class="icon-settings font-green-sharp"></i>
27 
                                        <span class="caption-subject bold uppercase">UI Select Demo</span>
28 
                                        <span class="caption-helper hide"></span>
29 
                                </div>
30 
                                <div class="actions">
31 
                                        <a class="btn btn-circle btn-icon-only btn-default" href="#">
32 
                                        <i class="icon-cloud-upload"></i>
33 
                                        </a>
34 
                                        <a class="btn btn-circle btn-icon-only btn-default" href="#">
35 
                                        <i class="icon-wrench"></i>
36 
                                        </a>
37 
                                </div>
38 
                        </div>
39 
                        <div class="portlet-body">
40 
                                <form class="form-horizontal" role="form">
41 
                                        <div class="form-body">
42 
 
43 
 
44 
                                                <div class="form-group">
45 
                                                        <label class="col-md-3 control-label">Default:</label>
46 
                                                        <div class="col-md-6">
47 
                                                                <ui-select ng-model="person.selected" theme="bootstrap">
48 
                                                            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
49 
                                                            <ui-select-choices repeat="person in people | filter: $select.search">
50 
                                                              <div ng-bind-html="person.name | highlight: $select.search"></div>
51 
                                                              <small ng-bind-html="person.email | highlight: $select.search"></small>
52 
                                                            </ui-select-choices>
53 
                                                          </ui-select>
54 
                                                        </div>
55 
                                                </div>
56 
 
57 
                                                <div class="form-group">
58 
                                                        <label class="col-md-3 control-label">Grouped:</label>
59 
                                                        <div class="col-md-6">
60 
                                                                <ui-select ng-model="person.selected" theme="bootstrap">
61 
            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
62 
            <ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
63 
              <span ng-bind-html="item.name | highlight: $select.search"></span>
64 
              <small ng-bind-html="item.email | highlight: $select.search"></small>
65 
            </ui-select-choices>
66 
          </ui-select>
67 
                                                        </div>
68 
                                                </div>
69 
 
70 
                                                <div class="form-group">
71 
                                                        <label class="col-md-3 control-label">With a clear button:</label>
72 
                                                        <div class="col-md-6">
73 
                                                                <div class="input-group">
74 
 
75 
            <ui-select ng-model="person.selected" theme="bootstrap">
76 
              <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
77 
              <ui-select-choices repeat="item in people | filter: $select.search">
78 
                <span ng-bind-html="item.name | highlight: $select.search"></span>
79 
                <small ng-bind-html="item.email | highlight: $select.search"></small>
80 
              </ui-select-choices>
81 
            </ui-select>
82 
 
83 
            <span class="input-group-btn">
84 
              <button ng-click="person.selected = undefined" class="btn btn-default">
85 
                <span class="glyphicon glyphicon-trash"></span>
86 
              </button>
87 
            </span>
88 
 
89 
          </div>
90 
                                                        </div>
91 
                                                </div>
92 
                                                <div class="form-group">
93 
                                                        <label class="col-md-3 control-label">Disabled:</label>
94 
                                                        <div class="col-md-6">
95 
                                                                 <ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="true">
96 
            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
97 
            <ui-select-choices repeat="item in people | filter: $select.search">
98 
              <div ng-bind-html="item.name | highlight: $select.search"></div>
99 
              <small ng-bind-html="item.email | highlight: $select.search"></small>
100 
            </ui-select-choices>
101 
          </ui-select>
102 
                                                        </div>
103 
                                                </div>
104 
 
105 
                                                <div class="form-group">
106 
                                                        <label class="col-md-3 control-label">Multiselect:</label>
107 
                                                        <div class="col-md-6">
108 
                                                                 <ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled">
109 
                                                                    <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
110 
                                                                    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
111 
                                                                        {{person.name}} - {{person.email}}
112 
                                                                    </ui-select-choices>
113 
                                                                  </ui-select>
114 
                                                                  <p>Selected: {{multipleDemo.selectedPeople}}</p>
115 
 
116 
                                                        </div>
117 
                                                </div>
118 
 
119 
 
120 
                                                <div class="form-actions">
121 
                                                        <div class="row">
122 
                                                                <div class="col-md-offset-3 col-md-9">
123 
                                                                        <button type="submit" class="btn green">Submit</button>
124 
                                                                        <button type="button" class="btn default">Cancel</button>
125 
                                                                </div>
126 
                                                        </div>
127 
                                                </div>
128 
                                        </div>
129 
                                </form>
130 
                        </div>
131 
                </div>
132 
        </div>
133 
</div>
134 
<!-- END MAIN CONTENT -->
135 
<!-- BEGIN MAIN JS-->
136 
<script></script>
137 
<!-- BEGIN MAIN JS -->