Howdy Charles - I’m no angular expert but a pro tip on getting some advice on a
mailing list is to be more specific.
What doesn’t work in your code?
One thing i see is this:
```
{{callTypeDisplay(data.lastCall.type)}}
```
which calls the corresponding method when rendering. However the code that sets
`data.lastCall.type` is resolved from a promise which occurs some time later
and thus the value your passing into the method called in your template is not
resolved until after rendering. so it seems your calling that method with the
arg `type` as ‘undefined` and so your seeing ‘Unknown’ in the browser. (if i’m
reading the code right)
The solution(if that is the problem, it was a quick skim i did) is to not
render until the promise resolves using a router. (like UI Router). This will
fix a few other issues too - in general wait to render until you have to the
data and use a router to make that easy.
Good luck and see if you can nail down a more precise question that folks more
versed in angular will be happy to answer in the morning or coming week.
> On Aug 25, 2015, at 12:20 AM, Charles Okaformbah <[email protected]>
> wrote:
>
> Please I am new to angularjs and I got this code online to use in creating a
> call history/log app but it seems not to be working. Am I doing anything
> wrong with the code?
>
> app.js
> angular.module('myApp',['ionic']).config(['$controllerProvider',
> function($controllerProvider) {
> $controllerProvider.allowGlobals();
> }])
> .factory('CallLogService', ['$q', function($q) {
> return {
>
> list : function(days) {
> var q = $q.defer();
> // days is how many days back to go
> window.plugins.calllog.list(days, function (response) {
> q.resolve(response.rows);
> }, function (error) {
> q.reject(error);
> });
> return q.promise;
> },
>
> contact : function(phoneNumber) {
> var q = $q.defer();
> window.plugins.calllog.contact(phoneNumber, function (response) {
> q.resolve(response);
> }, function (error) {
> q.reject(error);
> });
> return q.promise;
> },
>
> show : function(phoneNumber) {
> var q = $q.defer();
> window.plugins.calllog.show(phoneNumber, function (response) {
> q.resolve(response);
> }, function (error) {
> q.reject(error);
> });
> return q.promise;
> },
>
> delete : function(phoneNumber) {
> var q = $q.defer();
> window.plugins.calllog.delete(id, function (response) {
> q.resolve(response);
> }, function (error) {
> q.reject(error);
> });
> return q.promise;
> }
> };
> }])
> .controller('DebugCtrl', ['$scope', 'CallLogService', 'LocalStorage',
> function ($scope, CallLogService, LocalStorage) {
>
> $scope.data = {};
> $scope.callTypeDisplay = function(type) {
> switch(type) {
> case 1:
> return 'Incoming';
> case 2:
> return 'Outgoing';
> case 3:
> return 'Missed';
> default:
> return 'Unknown';
> }
> };
>
> CallLogService.list(1).then(
> function(callLog) {
> console.log(callLog);
> $scope.data.lastCall = callLog[0];
> },
> function(error) {
> console.error(error);
> });
> }])
> .config(function($provide) {
> $provide.decorator('CallLogService', ['$delegate', '$q', function ($delegate,
> $q) {
> if (window.plugins && window.plugins.calllog) {
> return $delegate;
> } else {
> return {
> list : function() {
> var lastCall = {
> cachedName: 'Joe Blow',
> cachedNumberType: 2,
> date: 1406720317112,
> duration: 2224,
> new: 1,
> number: '0420884679',
> type: 1
> };
> return $q.when([lastCall]);
> },
> contact : function() {
> return $q.when({});
> },
> show : function() {
> return $q.when(true);
> }
> };
> }
> }]);
> });
> Enter code here...
>
> index.html
> <html ng-app="myApp">
> <head>
> <title> Blablabla</title>
> <script src=""></script>
> <script src="app.js"></script>
> </head>
> <body>
> <ion-view class="h6" title="Debug">
> <ion-content class="has-header">
> <div class="row">
> <div class="col">Last Call</div>
> </div>
> <div class="row">
> <div class="col col-30 col-offset-10">Name</div>
> <div class="col">{{data.lastCall.cachedName}}</div>
> </div>
> <div class="row">
> <div class="col col-30 col-offset-10">Number</div>
> <div class="col">{{data.lastCall.number}}</div>
> </div>
> <div class="row">
> <div class="col col-30 col-offset-10">Type</div>
> <div class="col">{{callTypeDisplay(data.lastCall.type)}}</div>
> </div>
> <div class="row">
> <div class="col col-30 col-offset-10">Date</div>
> <div class="col">{{data.lastCall.date | date}}</div>
> </div>
> <div class="row">
> <div class="col col-30 col-offset-10">Duration</div>
> <div class="col">{{data.lastCall.duration}} seconds</div>
> </div>
> <div class="row">
> <div class="col col-30 col-offset-10">Acknowledged</div>
> <div class="col">{{(data.lastCall.new == 1 ? 'yes' : 'no')}}</div>
> </div>
> </ion-content>
> </ion-view>
> </body>
> </html>
>
>
>
> I appreciate
>
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected]
> <mailto:[email protected]>.
> To post to this group, send email to [email protected]
> <mailto:[email protected]>.
> Visit this group at http://groups.google.com/group/angular
> <http://groups.google.com/group/angular>.
> For more options, visit https://groups.google.com/d/optout
> <https://groups.google.com/d/optout>.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
