In a simple demo I created, there is a button labeled "openpopup". When the button is clicked, a pop-up screen appears allowing the user to select multiple elements. Initially, the first and second elements are selected by default. Upon running the application, you will notice that there are two columns displayed because the first two options are selected in the multiple selection box. When the pop-up is opened and the third option is selected, a third column is automatically created in the view. My requirement is for this to only happen when the user clicks the "select" button on the pop-up screen. In other words, any selection or deselection of checkboxes should only be reflected in the model and displayed in the view after the "select" button is pressed.
Here is my code:
<button ng-click="openPopover($event)">
openpopup
</button>
<script id="my-column-name.html" type="text/ng-template">
<ion-popover-view>
<ion-header-bar>
<h1 class="title">My Popover Title</h1>
</ion-header-bar>
<ion-content>
<ul class="list" ng-repeat="item in data">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" ng-model="item.checked" ng-click="itemCheckedUnCheckedhandler(item)">
</label>
{{item.label}}
</li>
</ul>
<button ng-click="closePopover()">select</button>
</ion-content>
</ion-popover-view>
</script>