我进行多次选择酥料饼,其中用户可以选择多个值。 我想打印屏幕上的所有选定的值或者得到一个对象,其中后者由用户选择的所有元素。我会。在我的演示换句话说,我必须在屏幕上。对按钮一个键点击解释我打开弹出了这有多种选择的元素我想这是由用户选择在弹出请查看我的演示。这里所有的元素是我的演示
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();
};
}
)
你可以改变你的模型增加一个属性:
$scope.data =[
{"name":"A", checked: false},
{"name":"B", checked: false},
{"name":"C", checked: false},
{"name":"D", checked: false},
{"name":"E", checked: false}
];
您的列表将附着在单元(NG-模型 )的属性:
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" ng-model="item.checked" ng-click="itemChecked(item)">
</label>
{{item.name}}
</li>
你可以听的变化添加一个方法(itemChecked)通过你的产品:
$scope.itemChecked = function(item)
{
alert(item.name);
}
这是修改后的plunker 。
如果你想限制检查:
$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;
}
}
在这里看到更新后的代码: http://codepen.io/anon/pen/jPypNb
您需要添加一个“ value
”设置为您的数据JSON列表,点击上,结合每个复选框,值绑定到它。
型号更新
$scope.data =[
{"name":"A", value:false},
{"name":"B", value:false},
{"name":"C", value:false},
{"name":"D", value:false},
{"name":"E", value:false}
]
HTML更新
<label class="checkbox">
<input type="checkbox" ng-model="item.value">
</label>
{{item.name}}