<!doctype html>
<html ng-app="app">
<head>
<link href="//twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://ivaynberg.github.com/select2/select2-3.2/select2.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/v0.3.1/build/angular-ui.min.js"></script>
<script src="https://raw.github.com/ivaynberg/select2/release-3.2/select2.min.js"></script>
<script>
var app = angular.module('app', ['ui']);
var RE_EMAIL = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
function Ctrl($scope) {
$scope.options = {
tags: ["foo@example.com", "bar@example.com"],
createSearchChoice: function(input) {
alert('called');
return RE_EMAIL.test(input) ? {id: input} : null;
}
};
}
</script>
<style>
input:invalid {
border-color: red;
}
</style>
</head>
<body ng-controller="Ctrl">
<p>New tags should be valid email addresses:</p>
<p>
<input type="hidden" ui-select2="options" multiple ng-model="selection" style="width: 300px"
data-placeholder="email@example.com">
</p>
<p>selection:</p>
<pre>{{selection | json}}</pre>
</body>
</html>