I make multiple selected popover , in which user can select multiple values . I want to print the all selected value on screen or get a object in which all element which is selected by user .I will explain in other words .In my demo I have one button on screen .On button click I open a pop over which have multiple selected element I want to get all element which is selected by user in pop up please check my demo .here is my demo
http://codepen.io/anon/pen/KpaejV
angular.module('ionicApp', ['ionic'])
.controller('MyController', function($scope, $ionicPopover) {
$scope.data =[
{"name":"A"},
{"name":"B"},
{"name":"C"},
{"name":"D"},
{"name":"E"}
]
$ionicPopover.fromTemplateUrl('my-popover.html', {
scope: $scope
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
}
)
See updated code here : http://codepen.io/anon/pen/jPypNb
You need to add a "value
" setting into your data JSON list and , on click, bind on each checkbox, bind the value to it.
Model Updated
$scope.data =[
{"name":"A", value:false},
{"name":"B", value:false},
{"name":"C", value:false},
{"name":"D", value:false},
{"name":"E", value:false}
]
HTML updated
<label class="checkbox">
<input type="checkbox" ng-model="item.value">
</label>
{{item.name}}
You can change your model adding a property:
$scope.data =[
{"name":"A", checked: false},
{"name":"B", checked: false},
{"name":"C", checked: false},
{"name":"D", checked: false},
{"name":"E", checked: false}
];
Your list will have the property attached to the element (ng-model):
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" ng-model="item.checked" ng-click="itemChecked(item)">
</label>
{{item.name}}
</li>
and you can listen to the changes adding a method (itemChecked) passing your item:
$scope.itemChecked = function(item)
{
alert(item.name);
}
and this is your modified plunker.
if you want to limit the checks:
$scope.itemChecked = function(item)
{
var count = 0;
angular.forEach($scope.data, function(value, key) {
count += value.checked ? 1 : 0;
});
if (count > 3)
{
item.checked = false;
}
}