Cordova Contacts via AngularJS and NetBeans IDE

Starting out from yesterday's blog entry, where I controlled the Android camera via an AngularJS Cordova application, let's now, instead of the Android camera, get hold of the Android contacts list.

So, do everything explained yesterday, except that you need to include the "Contacts" plugin, instead of the "Camera" plugin, via the tools in NetBeans IDE.

Then:

<button ng-contacts>Retrieve Contacts!</button>
<ol ng-repeat="contact in contacts">
    <div ng-show="contact.displayName.length > 0">
        <li style="list-style: circle">
            {{contact.displayName}}
        </li>
    </div>
</ol>

And here's the Directive referred to in the button above:

var app = angular.module('myApp.directives', []);
app.directive('ngContacts', function() {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs, ctrl) {
            elm.on('click', function() {
                navigator.contacts.create();
                var options = new ContactFindOptions();
                options.multiple = true;
                var fields = ["displayName"];
                navigator.contacts.find(fields, function(foundcontacts) {
                    scope.$apply(function() {
                        scope.contacts = foundcontacts;
                    });
                }, function(error) {
                    scope.$apply(function() {
                        alert('error: ' + error);
                    });
                }, options);
            });
        }
    };
});

That's all you need. Click the button and all the contacts are loaded and displayed if the display name has a length.

If you want to search for a particular name, use "options.filter = scope.filter", i.e., on the ContactFindOptions that you see above, set a filter, defined by a "filter" variable in an expression defined in the view.

Spent a lot of time trying to get the contact photo to be displayed, but failed so far.

Related resources:

http://tech.pro/tutorial/1401/phonegap-and-angularjs-contacts

https://issues.apache.org/jira/browse/CB-1045

Comments:

It might make more sense to move the logic into a service, and then via ng-click on the button call a function in your controller which calls the service?

Posted by Maarten on December 03, 2013 at 10:33 AM PST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
12
13
14
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today