140 lines
5.3 KiB
HTML
140 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en" ng-app="demo">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<title>AngularJS ui-select</title>
|
|
|
|
|
|
|
|
<!--
|
|
|
|
IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
|
|
|
|
For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
|
|
|
|
-->
|
|
|
|
<!--[if lt IE 9]>
|
|
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
|
|
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
|
|
|
|
<script>
|
|
|
|
document.createElement('ui-select');
|
|
|
|
document.createElement('ui-select-match');
|
|
|
|
document.createElement('ui-select-choices');
|
|
|
|
</script>
|
|
|
|
<![endif]-->
|
|
|
|
|
|
|
|
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
|
|
|
|
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
|
|
|
|
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
|
|
|
|
|
|
|
|
<!--
|
|
|
|
Selectize theme
|
|
|
|
Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
|
|
|
|
-->
|
|
|
|
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css">
|
|
|
|
|
|
|
|
<!-- ui-select files -->
|
|
|
|
<script src="../dist/select.js"></script>
|
|
|
|
<link rel="stylesheet" href="../dist/select.css">
|
|
|
|
|
|
|
|
<style>
|
|
|
|
body {
|
|
|
|
padding: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.selectize-control {
|
|
|
|
/* Align Selectize with input-group-btn */
|
|
|
|
top: 2px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.selectize-control > .selectize-dropdown {
|
|
|
|
top: 34px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Reset right rounded corners, see Bootstrap input-groups.less */
|
|
|
|
.input-group > .selectize-control > .selectize-input {
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
border-top-right-radius: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
|
|
<body ng-controller="DemoCtrl">
|
|
|
|
<script src="demo.js"></script>
|
|
|
|
|
|
|
|
<p>Selected: {{person.selected.name}}</p>
|
|
|
|
|
|
|
|
<form class="form-horizontal">
|
|
|
|
<fieldset>
|
|
|
|
<legend>ui-select inside a Bootstrap form</legend>
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
<label class="col-sm-3 control-label">Default</label>
|
|
|
|
<div class="col-sm-6">
|
|
|
|
|
|
|
|
<ui-select ng-model="person.selected" theme="selectize" title="Choose a person">
|
|
|
|
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
|
|
|
|
<ui-select-choices repeat="item in people | filter: $select.search">
|
|
|
|
<div ng-bind-html="item.name | highlight: $select.search"></div>
|
|
|
|
<small ng-bind-html="item.email | highlight: $select.search"></small>
|
|
|
|
</ui-select-choices>
|
|
|
|
</ui-select>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
<label class="col-sm-3 control-label">Grouped</label>
|
|
|
|
<div class="col-sm-6">
|
|
|
|
|
|
|
|
<ui-select ng-model="person.selected" theme="selectize" title="Choose a person">
|
|
|
|
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
|
|
|
|
<ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
|
|
|
|
<span ng-bind-html="item.name | highlight: $select.search"></span>
|
|
|
|
<small ng-bind-html="item.email | highlight: $select.search"></small>
|
|
|
|
</ui-select-choices>
|
|
|
|
</ui-select>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
<label class="col-sm-3 control-label">With a clear button</label>
|
|
|
|
<div class="col-sm-6">
|
|
|
|
<div class="input-group">
|
|
|
|
|
|
|
|
<ui-select ng-model="person.selected" theme="selectize">
|
|
|
|
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
|
|
|
|
<ui-select-choices repeat="item in people | filter: $select.search">
|
|
|
|
<span ng-bind-html="item.name | highlight: $select.search"></span>
|
|
|
|
<small ng-bind-html="item.email | highlight: $select.search"></small>
|
|
|
|
</ui-select-choices>
|
|
|
|
</ui-select>
|
|
|
|
|
|
|
|
<span class="input-group-btn">
|
|
|
|
<button ng-click="person.selected = undefined" class="btn btn-default">
|
|
|
|
<span class="glyphicon glyphicon-trash"></span>
|
|
|
|
</button>
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
<label class="col-sm-3 control-label">Disabled</label>
|
|
|
|
<div class="col-sm-6">
|
|
|
|
|
|
|
|
<ui-select ng-model="person.selected" theme="selectize" class="form-control" ng-disabled="true" title="Choose a person">
|
|
|
|
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
|
|
|
|
<ui-select-choices repeat="item in people | filter: $select.search">
|
|
|
|
<div ng-bind-html="item.name | highlight: $select.search"></div>
|
|
|
|
<small ng-bind-html="item.email | highlight: $select.search"></small>
|
|
|
|
</ui-select-choices>
|
|
|
|
</ui-select>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|