angular-tag/example.html at master · eddieos/angular-tag · GitHub

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
<!DOCTYPE html >
<html lang="en" ng-app="example">
<head>
    <meta charset="UTF-8">
    <title>Tag Test</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="dist/angular-tag.min.js"></script>
<link rel="stylesheet" href="dist/angular-tag.min.css">
</link>

   <script>
       angular.module('example',['ngAnimate','angular-tag'])

         .controller('MainCtrl',function ($scope) {
    $scope.data=[{texti:'Jss1',added:'test'},{texti:'Jss2',add:'test3'},{texti:'Jss3',value:'owk'}];
    $scope.selected=[];

    $scope.$on('tagAdded', function (event, data) {
    console.log(data); // 'Some data'
    });

    $scope.$on('tagRemoved', function (event, data) {
    console.log(data); // 'Some data'
    console.log(event);
    console.log($scope.selected)
    });

    })
   </script>
</head>
<body ng-controller="MainCtrl" >
<p>Tag Me</p>
<p>Data: {{data}}</p>
<p>Selected: {{selected}}</p>

<tag-me type="input" data="data" selected="selected" display-field="texti" typehead="true" theme="material"  allow-outside-data-set="true" same-input="false">test</tag-me>

<p ng-init="selectedi=[{text:'Test'},{text:'three'}]">Selected: {{selectedi}}</p>
<tag-me type="input" data="data" selected="selectedi" placeholder="your own placeholder"  typehead="false" allow-outside-data-set="true" same-input="false">test</tag-me>

</body>
</html>