I have a data binding question using angular and the ionic framework. So I am trying to let a user select contacts from a modal, which should bind/fill a form field on the page. This seems like a basic angular question and since I'm new to Angular binding, not sure how it works. How do scopes work in this case with a modal? If I pass in the controller $scope to the modal when I create it does it have access to the same scope and model objects with the angular directives like ng-model within the html of the modal itself?
I tried initially just setting the ng-model on the checkbox to the same ng-model of the form field thinking it might just sync bind any changes back to the form but that didn't work.
<ion-view title="Create">
<ion-content class="has-header">
<form name="inviteForm" ng-submit="createInvite(invite)">
<div class="list">
<label class="item item-input">
<span class="input-label">Who</span>
<input type="text" placeholder="Who" ng-model="invite.who" readonly ng-click="openContactPicker()">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Invite</button>
</div>
</form>
</ion-content>
</ion-view>
<script id="pick-contacts.html" type="text/ng-template">
<div class="modal">
<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
<h1 class="title">Pick Contacts</h1>
<button class="button button-clear button-positive" ng-click="closeContactPicker()">Done</button>
</ion-header-bar>
<!-- Modal content area -->
<ion-content>
<ul class="list">
<li ng-repeat="contact in contacts" class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" value='{{contact}}' ng-model="invite.who">
</label>
{{contact.displayName}}
</li>
</ul>
</ion-content>
</div>
</script>
controller code
// Create and load the Modal
$ionicModal.fromTemplateUrl('pick-contacts.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.pickerModal = modal;
});
$scope.openContactPicker = function() {
// $scope.contacts = {};
$scope.pickerModal.show();
//this below throws invite undefined error
console.log(invite);
if ($scope.contacts.length == 0 && navigator && navigator.contacts)
{
var options = new ContactFindOptions();
options.multiple = true;
var fields = ["displayName", "emails", "phoneNumbers"]; //name or displayName
navigator.contacts.find(fields, function(contacts){
$scope.contacts = contacts;
}, function(){
console.log('error');
}, options);
}
};
// Called when the form is submitted
$scope.createInvite = function(invite) {
$scope.invites.unshift({
who: invite.who
});
$scope.inviteModal.hide();
$scope.invite = {};
$ionicNavBarDelegate.back();
};
you can add an index on the checkbox to differentiate the checkboxes
<input type="checkbox" value='{{contact}}' ng-model="invite.who[$index]">
then the $index
value can be used to map back to the contact in the contacts array.
I don't think there is a problem with your binding since the code is all in the controller.
But, you have your checkbox in an ng-repeat. The way you bind it means that all your checkboxes now receive the same ng-model. There is now way to determine which contact is invited and which not.
Each checkbox should have it's own modal or you can add a click event and maintain a list of all the clicked contacts.