In my app I am showing contacts in <ion-list>
and upon clicking on an <ion-list>
element, I am opening an ionicModal which shows the name and phone number of the the contact. Now, my code is this -
modal.html:-
<script id="modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class ="bar-calm">
<h1 class="title">My Modal title</h1>
<button class="button" ng-click="closeModal()">Back</button>
</ion-header-bar>
<ion-content padding="true" >
Hello!
<h1>{{$parent.selectedContact.displayName}}</h1>
<h2>{{$parent.optionsPhoneNumber[0]}}</h2>
<h2>{{$parent.optionsPhoneNumber[1]}}</h2>
<h2>{{$parent.optionsPhoneNumber[2]}}</h2>
<ion-list >
<ion-item ng-repeat="nos in optionsPhoneNumber" >
<button class="button" ui-sref="home" ng-click="selectPhoneNumber($index)">
{{nos}}
</button>
</ion-item>
</ion-list>
</ion-content>
</ion-modal-view>
</script>
modal init:-
//init the modal
$ionicModal.fromTemplateUrl('modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal;
});
Here optionPhoneNumber contains phone Numbers and it’s size may vary.
So when I run the app, and click on 1st contact, ionicModal opens but no <ion-list>
is shown, all I get is Name and PhoneNumbers on <h1>
and <h2>
fields which I have added just for debugging process.
Now as PhoneNumbers are shown on <h2>
fields and not on the <ion-list>
even if same parameters are used to access them in both cases, I am confused what is causing this.
The strange part is, at a time, 4 contacts out of 300 appears on the screen so when I click on any contact except 2nd one, I am getting same output i.e. no list.
But on clicking the 2nd or first scrolling a little bit, then clicking anyone I am getting a list view but most of the time they remain same for different contacts.
Please help me fix this, I can post more code if needed.
Thank you.