<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script data-require="ui-select@*" data-semver="0.11.1" src="https://cdn.rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<link data-require="ui-select@*" data-semver="0.11.1" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/ui-select/master/dist/select.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
<script>
function ctrl(){
var vm = this;
vm.selected = null;
vm.list = [
{id:1,name:"Tanaka ichiro"}
,{id:2,name:"Suzuki yoshio"}
,{id:3,name:"Fujita taro"}
,{id:4,name:"Kawada yukio"}
,{id:5,name:"Horikawa hanako"}
];
vm.addList = function(name){
return {name:name};
}
}
function config(uiSelectConfig) {
uiSelectConfig.theme = 'bootstrap';
uiSelectConfig.resetSearchInput = true;
};
angular.module('app',['ui.select']).controller('ctrl',ctrl)
.config(config);
</script>
</head>
<body ng-controller="ctrl as c" style="padding:1em">
<h3>単一選択</h3>
<div ui-select ng-model="c.selected1">
<div ui-select-match>{{$select.selected.name}}</div>
<div ui-select-choices repeat="l in c.list|filter:$select.search">{{l.name}}</div>
</div>
<h3>複数選択</h3>
<!-- ui-selectにmultipleがついて、matchが$itemになる -->
<div ui-select ng-model="c.selected2" multiple>
<div ui-select-match>{{$item.name}}</div>
<div ui-select-choices repeat="l in c.list|filter:$select.search">{{l.name}}</div>
</div>
<h3>単一選択追加可能（タギング）</h3>
<!-- オブジェクトのリストの場合、taggingに"必ず"オブジェクト生成の処理を入れる -->
<div ui-select tagging="c.addList" ng-model="c.selected3">
<div ui-select-match>{{$select.selected.name}}</div>
<div ui-select-choices repeat="l in c.list|filter:$select.search">{{l.name}}</div>
</div>
<h3>複数選択追加可能（タギング）</h3>
<!-- 単一選択と複数選択の違いと同じ、taggingをつけるだけ -->
<div ui-select tagging="c.addList" ng-model="c.selected4" multiple>
<div ui-select-match>{{$item.name}}</div>
<div ui-select-choices repeat="l in c.list|filter:$select.search">{{l.name}}</div>
</div>
</body>
</html>