-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathexample.html
86 lines (75 loc) · 2.78 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html >
<html lang="en" ng-app="example">
<head>
<meta charset="UTF-8">
<title>Tag Test</title>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-dragdrop/src/angular-dragdrop.min.js"></script>
<script src="dist/angular-tag.min.js"></script>
<link rel="stylesheet" href="dist/angular-tag.min.css"/>
<script>
angular.module('example',['ngAnimate','ngDragDrop','angular-tag'])
.controller('MainCtrl',function ($scope) {
$scope.data=[{texti:'Jss1',added:'test'},{texti:'Jss2',add:'test3'},{texti:'Jss3',value:'owk'}];
$scope.selected=[];
$scope.max=2;
$scope.delimiter=[",","x","-"];
$scope.tagUpdated=function (event) {
console.log("Event:"+event.action);
console.log(event.item);
};
})
</script>
</head>
<body ng-controller="MainCtrl" >
<p>Tag Me</p>
<p>Data: {{data}}</p>
<p>Selected: {{selected}}</p>
<p>Max Selected Allowed: {{selected.length+" in "+max}}</p>
<tag-me type="input"
data="data" selected="selected"
display-field="texti"
theme="material"
max="max" delimiter="delimiter"
on-tag-maximum="tagUpdated(event)"
on-tag-added="tagUpdated(event)"
on-tag-removed="tagUpdated(event)"
></tag-me>
<p ng-init="selectedi=[{text:'Test'},{text:'three'}]">Selected: {{selectedi}}</p>
<tag-me
type="input" selected="selectedi"
placeholder="your own placeholder"
typehead="false" allow-outside-data-set="true"
same-input="true"
on-tag-added="tagUpdated(event)"
on-tag-removed="tagUpdated(event)"
on-tag-active="tagUpdated(event)"
>
</tag-me>
<br>
<p>
<strong>Using Required in Form Instance</strong>
<pre>this disables the form submit button when the form is $dirty , better use with angular form</pre>
</p>
<form name="formName">
<tag-me name="fieldName" type="input"
data="data" selected="selected"
display-field="texti"
theme="material"
max="max" delimiter="delimiter"
on-tag-maximum="tagUpdated(event)"
on-tag-added="tagUpdated(event)"
on-tag-removed="tagUpdated(event)"
required="true"
></tag-me>
<!--you error template here-->
<span style="color: red;" ng-show="formName.fieldName.$error.required"><strong>Tag Me is Required</strong></span>
<!--end your error template-->
<br>
<button type="submit" ng-disabled="formName.fieldName.$error.required">Save</button>
</form>
</body>
</html>