angular-dadata/example.html at master · uqee/angular-dadata · 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>myApp</title>

    <!-- jquery libs -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 10]>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.1/jquery.xdomainrequest.min.js"></script>
    <![endif]-->

    <!-- dadata libs -->
    <link rel="stylesheet" href="http://dadata.ru/static/css/lib/suggestions-4.7.css" />
    <script src="http://dadata.ru/static/js/lib/jquery.suggestions-4.7.min.js"></script>

    <!-- angular libs -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>

    <!-- your scripts -->
    <!--
      next script is just a copy of ./ng-dadata.js module
      aimed make this example available without launching any web-server
    -->
    <script>
      angular
        .module('dadata', [])

        .directive('dadata', [function () {

          function link (scope, element) {
            $(element).suggestions({
              token: '<your-api-key>',
              type: scope.type.toUpperCase(),
              onSelect: function(suggestion) {
                scope.data = suggestion.data;
                scope.$apply();
              }
            });
          }

          return {
            restrict: 'A',
            link: link,
            scope: {
              type: '@ddtType',
              data: '=ddtModel'
            }
          };

        }]);
    </script>
    <script>angular.module('myApp', ['dadata']);</script>

  </head>
  <body ng-app="myApp">

    <input type="text" size="100" dadata ddt-type="address" ddt-model="addr" />
    <table ng-show="addr">
      <tr ng-repeat="(key, value) in addr">
        <td>{{key}}</td>
        <td>{{value}}</td>
      </tr>
    </table>

  </body>
</html>