Skip to content

Commit 1d1c73c

Browse files
mateusmirandaalmeidamateusmirandaalmeida
committed
docs
1 parent a3e67b9 commit 1d1c73c

File tree

3 files changed

+339
-0
lines changed

3 files changed

+339
-0
lines changed

‎async.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html ng-app="app">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>ng-ui-multi-select</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
7+
<link rel="stylesheet" href="dist/ng-ui-multi-select.css">
8+
</head>
9+
<body ng-controller="ctrl"> <br><br>
10+
<style media="screen">
11+
body{
12+
background: #f5f5f5;
13+
}
14+
</style>
15+
16+
<main>
17+
<div class="container">
18+
19+
20+
<div class="row">
21+
<div class="col-md-12">
22+
<div class="form-group">
23+
<label>Funcionarios: </label>
24+
25+
<ui-multi-select placeholder="Buscar..."
26+
ng-model="funcionarios"
27+
close-on-select-item="false"
28+
on-selected="onSelect(value)"
29+
on-remove="onRemove(value)"
30+
search-options="getOptions(value)">
31+
<ui-multi-select-item ng-repeat="item in funcionarios" ng-value="item">
32+
{{item.name}}
33+
</ui-multi-select-item>
34+
<ui-multi-select-option ng-repeat="option in items" ng-value="option">
35+
{{option.name}}
36+
</ui-multi-select-option>
37+
</ui-multi-select>
38+
39+
</div>
40+
41+
</div>
42+
43+
<div class="col-md-8">
44+
<label>Model: </label>
45+
<pre>{{funcionarios|json}}</pre>
46+
</div>
47+
</div>
48+
49+
<div class="row" ng-non-bindable>
50+
<div class="col-md-6">
51+
<h3>HTML</h3>
52+
<pre><code style="font-size: 10px;" class="prettyprint">&lt;div class="form-group"&gt;
53+
&lt;label&gt;Funcionarios: &lt;/label&gt;
54+
&lt;ui-multi-select placeholder="Buscar..."
55+
close-on-select-item="false"
56+
ng-model="funcionarios"
57+
search-options="getOptions(value)"&gt;
58+
&lt;ui-multi-select-item ng-repeat="item in funcionarios"
59+
ng-value="item"&gt;
60+
{{item.username}}
61+
&lt;/ui-multi-select-item&gt;
62+
&lt;ui-multi-select-option ng-repeat="option in items"
63+
ng-value="option"&gt;
64+
{{option.username}}
65+
&lt;/ui-multi-select-option&gt;
66+
&lt;/ui-multi-select&gt;
67+
&lt;/div&gt;</code></pre>
68+
</div>
69+
<div class="col-md-6">
70+
<h3>JavaScript</h3>
71+
<pre><code style="font-size: 10px;" class="prettyprint">angular.module('app', ['ngUiMultiSelect'])
72+
.controller('ctrl', function($scope, $timeout, $http){
73+
74+
$scope.getOptions = function(viewValue){
75+
return $http.get('https://jsonplaceholder.typicode.com/users?q='+viewValue)
76+
.then(function(resp){
77+
$scope.items = resp.data;
78+
})
79+
}
80+
81+
})</code></pre>
82+
</div>
83+
</div>
84+
85+
</div>
86+
</main>
87+
88+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
89+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
90+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
91+
<script type="text/javascript" src="dist/ng-ui-multi-select.js"></script>
92+
93+
<script type="text/javascript">
94+
angular.module('app', ['ngUiMultiSelect']).controller('ctrl', function($scope, $timeout, $http){
95+
96+
$scope.funcionarios = [];
97+
98+
$scope.onSelect = function(value){
99+
console.log(value);
100+
}
101+
102+
$scope.onRemove = function(value){
103+
console.log(value);
104+
}
105+
106+
$scope.getOptions = function(viewValue){
107+
return $http.get('https://jsonplaceholder.typicode.com/users?q='+viewValue)
108+
.then(function(resp){
109+
$scope.items = resp.data;
110+
})
111+
}
112+
113+
})
114+
</script>
115+
116+
</body>
117+
</html>

‎simple-array.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html ng-app="app">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>ng-ui-multi-select</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
7+
<link rel="stylesheet" href="dist/ng-ui-multi-select.css">
8+
</head>
9+
<body ng-controller="ctrl"> <br><br>
10+
<style media="screen">
11+
body{
12+
background: #f5f5f5;
13+
}
14+
</style>
15+
16+
<main>
17+
<div class="container">
18+
19+
20+
<div class="row">
21+
<div class="col-md-12">
22+
<div class="form-group">
23+
<label>Funcionarios: </label>
24+
25+
<ui-multi-select placeholder="Buscar..."
26+
ng-model="funcionarios"
27+
close-on-select-item="false">
28+
<ui-multi-select-item ng-repeat="item in funcionarios" ng-value="item">
29+
{{item.nome}}
30+
</ui-multi-select-item>
31+
<ui-multi-select-option ng-repeat="option in items" ng-value="option">
32+
{{option.nome}}
33+
</ui-multi-select-option>
34+
</ui-multi-select>
35+
36+
</div>
37+
38+
</div>
39+
40+
<div class="col-md-8">
41+
<label>Model: </label>
42+
<pre>{{funcionarios|json}}</pre>
43+
</div>
44+
</div>
45+
46+
<div class="row" ng-non-bindable>
47+
<div class="col-md-6">
48+
<h3>HTML</h3>
49+
<pre><code style="font-size: 10px;" class="prettyprint">&lt;div class="form-group"&gt;
50+
&lt;label&gt;Funcionarios: &lt;/label&gt;
51+
&lt;ui-multi-select placeholder="Buscar..."
52+
close-on-select-item="false"
53+
ng-model="funcionarios"&gt;
54+
&lt;ui-multi-select-item ng-repeat="item in funcionarios"
55+
ng-value="item"&gt;
56+
{{item.nome}}
57+
&lt;/ui-multi-select-item&gt;
58+
&lt;ui-multi-select-option ng-repeat="option in items"
59+
ng-value="option"&gt;
60+
{{option.nome}}
61+
&lt;/ui-multi-select-option&gt;
62+
&lt;/ui-multi-select&gt;
63+
&lt;/div&gt;</code></pre>
64+
</div>
65+
<div class="col-md-6">
66+
<h3>JavaScript</h3>
67+
<pre><code style="font-size: 10px;" class="prettyprint">angular.module('app', ['ngUiMultiSelect'])
68+
.controller('ctrl', function($scope, $timeout){
69+
70+
$scope.items = [
71+
{ nome: 'Mateus', idade: 20},
72+
{ nome: 'Willian', idade: 25},
73+
{ nome: 'Felipe', idade: 25},
74+
{ nome: 'Munif', idade: 50}
75+
];
76+
77+
})</code></pre>
78+
</div>
79+
</div>
80+
81+
</div>
82+
</main>
83+
84+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
85+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
86+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
87+
<script type="text/javascript" src="dist/ng-ui-multi-select.js"></script>
88+
89+
<script type="text/javascript">
90+
angular.module('app', ['ngUiMultiSelect']).controller('ctrl', function($scope, $timeout, $http){
91+
92+
$scope.funcionarios = [];
93+
94+
$scope.items = [
95+
{ nome: 'Mateus', idade: 20},
96+
{ nome: 'Willian', idade: 25},
97+
{ nome: 'Felipe', idade: 25},
98+
{ nome: 'Munif', idade: 50}
99+
];
100+
101+
})
102+
</script>
103+
104+
</body>
105+
</html>

‎tagging.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html ng-app="app">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>ng-ui-multi-select</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
7+
<link rel="stylesheet" href="dist/ng-ui-multi-select.css">
8+
</head>
9+
<body ng-controller="ctrl"> <br><br>
10+
<style media="screen">
11+
body{
12+
background: #f5f5f5;
13+
}
14+
</style>
15+
16+
<main>
17+
<div class="container">
18+
19+
20+
<div class="row">
21+
<div class="col-md-12">
22+
<div class="form-group">
23+
<label>Funcionarios: </label>
24+
25+
<ui-multi-select placeholder="Buscar..."
26+
ng-model="funcionarios"
27+
close-on-select-item="false"
28+
tagging="addItem(value)"
29+
tagging-model="items">
30+
<ui-multi-select-item ng-repeat="item in funcionarios" ng-value="item">
31+
{{item.nome}}
32+
</ui-multi-select-item>
33+
<ui-multi-select-option ng-repeat="option in items" ng-value="option">
34+
{{option.nome}}
35+
</ui-multi-select-option>
36+
</ui-multi-select>
37+
38+
</div>
39+
40+
</div>
41+
42+
<div class="col-md-8">
43+
<label>Model: </label>
44+
<pre>{{funcionarios|json}}</pre>
45+
</div>
46+
</div>
47+
48+
<div class="row" ng-non-bindable>
49+
<div class="col-md-6">
50+
<h3>HTML</h3>
51+
<pre><code style="font-size: 10px;" class="prettyprint">&lt;div class="form-group"&gt;
52+
&lt;label&gt;Funcionarios: &lt;/label&gt;
53+
&lt;ui-multi-select placeholder="Buscar..."
54+
close-on-select-item="false"
55+
ng-model="funcionarios"
56+
tagging="addItem(value)"
57+
tagging-model="items"&gt;
58+
&lt;ui-multi-select-item ng-repeat="item in funcionarios"
59+
ng-value="item"&gt;
60+
{{item.nome}}
61+
&lt;/ui-multi-select-item&gt;
62+
&lt;ui-multi-select-option ng-repeat="option in items"
63+
ng-value="option"&gt;
64+
{{option.nome}}
65+
&lt;/ui-multi-select-option&gt;
66+
&lt;/ui-multi-select&gt;
67+
&lt;/div&gt;</code></pre>
68+
</div>
69+
<div class="col-md-6">
70+
<h3>JavaScript</h3>
71+
<pre><code style="font-size: 10px;" class="prettyprint">angular.module('app', ['ngUiMultiSelect'])
72+
.controller('ctrl', function($scope, $timeout){
73+
74+
$scope.addItem = function(value){
75+
return {nome: value};
76+
}
77+
78+
$scope.items = [
79+
{ nome: 'Mateus', idade: 20},
80+
{ nome: 'Willian', idade: 25},
81+
{ nome: 'Felipe', idade: 25},
82+
{ nome: 'Munif', idade: 50}
83+
];
84+
85+
})</code></pre>
86+
</div>
87+
</div>
88+
89+
</div>
90+
</main>
91+
92+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
93+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
94+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
95+
<script type="text/javascript" src="dist/ng-ui-multi-select.js"></script>
96+
97+
<script type="text/javascript">
98+
angular.module('app', ['ngUiMultiSelect']).controller('ctrl', function($scope, $timeout, $http){
99+
100+
$scope.funcionarios = [];
101+
102+
$scope.addItem = function(value){
103+
return {nome: value};
104+
}
105+
106+
$scope.items = [
107+
{ nome: 'Mateus', idade: 20},
108+
{ nome: 'Willian', idade: 25},
109+
{ nome: 'Felipe', idade: 25},
110+
{ nome: 'Munif', idade: 50}
111+
];
112+
113+
})
114+
</script>
115+
116+
</body>
117+
</html>

0 commit comments

Comments
 (0)