How to reflect dynamically generated text in scope variable and finally in the view in AngularJS (Ionic)

I am totally new to angularjs, ionic and cordova. Though my problem here has got nothing to do with cordova and ionic. I just want to display a dynamically created string to be displayed in my view(That dynamically created string in the code given below is "finalContacts") I am using the contact picker cordova plugin to pick up contacts and then display them in a div. Here is my index.html file

<body ng-app="starter">

  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content ng-controller="SmsCtrl">
  <ion-item>

  <input id="numberTxt" placeholder="Enter mobile number" value="" ng-model="form.number"type="tel" />
  </ion-item>
  <ion-item>
  <textarea id="messageTxt" placeholder="Enter message" ng-model="form.message"></textarea>
  </ion-item>
  <button class="button button-bar button-balanced" ng-click="sendSms()">Send SMS</button>
  <button class="button button-bar button-balanced" ng-click="doContactPicker()">Pick Contact</button>
  <!-- <input type="button" onclick="app.sendSms()" value="Send SMS" /> -->
  <h1>data here</h1>
  <h2>{{ content }}</h2>
  <h2>{{ counter }}</h2>
  </ion-content>
</ion-pane>

the doContactPicker is the function that would pick up contacts from the phonebook and show them in the h2 tags under scope.content variable.

the app.js file is as follows

angular.module('starter', ['ionic','ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.controller('SmsCtrl', ['$scope','$ionicPlatform','$cordovaSms', function ($scope,$ionicPlatform,$cordovaSms) {
  console.log('enetered in ctrl');
  $scope.form={}
$scope.counter=contactCount
$scope.doContactPicker=function() {
    contactCount++;
    navigator.contacts.pickContact(function(contact){
        console.log('The following contact has been selected:' + JSON.stringify(contact));
        //Build a simple string to display the Contact - would be better in Handlebars
        var s = "";
        s += "<h2>"+getName(contact)+"</h2>";

        if(contact.emails && contact.emails.length) {
            s+= "Email: "+contact.emails[0].value+"<br/>";
        }

        if(contact.phoneNumbers && contact.phoneNumbers.length) {
            s+= "Phone: "+contact.phoneNumbers[0].value+"<br/>";
        }

        if(contact.photos && contact.photos.length) {
            s+= "<p><img src='"+contact.photos[0].value+"'></p>";
        }

        finalContacts+=s;

    },function(err){
        console.log('Error: ' + err);
    });
   /* $ionicPlatform.ready(function() { $scope.doContactPicker(); }, function(error) {
        console.log(error);
      })*/

}

$scope.content=finalContacts
  $scope.sendSms = function(){
    console.log($scope.form.number);
    console.log($scope.form.message);
     var options = {
            replaceLineBreaks: false, // true to replace \n by a new line, false by default
            android: {
                intent: ''  
            }
        };
    $ionicPlatform.ready(function(){
      $cordovaSms
      .send($scope.form.number, $scope.form.message, options)
      .then(function(result) {
        console.log(result);

      }, function(error) {
        console.log(error);
      })
    })
  }

}])

if this was not angular I would have just changed the inner html to reflect the selected contacts :-

    document.querySelector("#divId").innerHTML=finalContacts;

The String would be generated once the pickContact button(check index.html) is pressed. this will fire a function which will use the cordova plugin api to pick up contacts from the phonebook and append the name and number in a string and then I want this string to displayed on the ui in h2 tags.

How to I acheive the same via scope variable or is there any other way to do this.

The problem is in the contacts object that is being passed. So this most probably has to do something with the cordova contact picker plugin. This is the example i have followed : https://github.com/cfjedimaster/Cordova-Examples/tree/master/contactpickerui this works well but I have created the angularjs implementation of the same and not able to get data in scope.

Answers


Try moving the

$scope.content = finalContacts

Check out ng-repeat. You should never have to build your own HTML in Angular. In this case you would set up a list of contact objects in JS and use it in the ng-repeat directive set on a block of HTML you want to use for each element.

Say you have a list named contacts, where each contact looks like {name: 'some_name', number: 1234}. Your HTML could look like:

<div ng-repeat="n in contacts">
  <h2>{{contact.name}}</h2>
  {{contact.phone}}</br>
</div>

This would give you that same div with the details of each contact.


Need Your Help

WPF TextBox's IsInactiveSelectionHighlightEnabled property is not work?

c# wpf textbox focus selection

WPF's TextBox has a property named IsInactiveSelectionHighlightEnabled. I set this property to true in order to make a TextBox always show selection. However, it doesn't work in this case:

Defining python classes with enums

python class enums

Recently I defined one of my Python classes as shown below.