|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en" ng-app="demo"> |
| 3 | +<head> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <title>AngularJS ui-select</title> |
| 6 | + |
| 7 | + <!-- |
| 8 | + IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie |
| 9 | + For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim |
| 10 | + --> |
| 11 | + <!--[if lt IE 9]> |
| 12 | + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> |
| 13 | + <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script> |
| 14 | + <script> |
| 15 | + document.createElement('ui-select'); |
| 16 | + document.createElement('ui-select-match'); |
| 17 | + document.createElement('ui-select-choices'); |
| 18 | + </script> |
| 19 | + <![endif]--> |
| 20 | + |
| 21 | + <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script> |
| 22 | + <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script> |
| 23 | + <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css"> |
| 24 | + |
| 25 | + <!-- ui-select files --> |
| 26 | + <script src="../dist/select.js"></script> |
| 27 | + <link rel="stylesheet" href="../dist/select.css"> |
| 28 | + |
| 29 | + <script src="demo.js"></script> |
| 30 | + |
| 31 | + <!-- Select2 theme --> |
| 32 | + <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css"> |
| 33 | + |
| 34 | + <!-- |
| 35 | + Selectize theme |
| 36 | + Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less |
| 37 | + --> |
| 38 | + <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css"> |
| 39 | + <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> --> |
| 40 | + <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> --> |
| 41 | + |
| 42 | + <style> |
| 43 | + body { |
| 44 | + padding: 15px; |
| 45 | + } |
| 46 | + |
| 47 | + .select2 > .select2-choice.ui-select-match { |
| 48 | + /* Because of the inclusion of Bootstrap */ |
| 49 | + height: 29px; |
| 50 | + } |
| 51 | + |
| 52 | + .selectize-control > .selectize-dropdown { |
| 53 | + top: 36px; |
| 54 | + } |
| 55 | + </style> |
| 56 | +</head> |
| 57 | + |
| 58 | +<body ng-controller="DemoCtrl"> |
| 59 | + <script src="demo.js"></script> |
| 60 | + |
| 61 | + <button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button> |
| 62 | + <button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button> |
| 63 | + <button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button> |
| 64 | + |
| 65 | + <h3>Select2 theme</h3> |
| 66 | + <p>Selected: {{person.selected}}</p> |
| 67 | + <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;"> |
| 68 | + <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match> |
| 69 | + <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}"> |
| 70 | + <div ng-bind-html="person.name | highlight: $select.search"></div> |
| 71 | + <small> |
| 72 | + email: {{person.email}} |
| 73 | + age: <span ng-bind-html="''+person.age | highlight: $select.search"></span> |
| 74 | + </small> |
| 75 | + </ui-select-choices> |
| 76 | + </ui-select> |
| 77 | + |
| 78 | + <br> |
| 79 | + <br> |
| 80 | + <br> |
| 81 | + <button class=" btn btn-primary" ng-click=" person.selected = '[email protected]'" >Change Model </button> |
| 82 | + <span>(person.selected = ' [email protected]') </span> |
| 83 | + |
| 84 | +</body> |
| 85 | + |
| 86 | +</html> |
0 commit comments