可以通过以下步骤实现:
<input type="checkbox" ng-model="checkboxValues.option1"> Option 1
<input type="checkbox" ng-model="checkboxValues.option2"> Option 2
<input type="checkbox" ng-model="checkboxValues.option3"> Option 3
在这个例子中,我们创建了一个名为checkboxValues的对象,它包含了三个属性option1、option2和option3,分别对应三个复选框的选中状态。
app.controller('MyController', function($scope) {
$scope.checkboxValues = {};
$scope.getSelectedValues = function() {
var selectedValues = [];
for (var key in $scope.checkboxValues) {
if ($scope.checkboxValues[key]) {
selectedValues.push(key);
}
}
return selectedValues;
};
});
在这个例子中,我们定义了一个名为getSelectedValues的函数,它遍历checkboxValues对象的属性,如果属性的值为true,则将属性名添加到selectedValues数组中。
<button ng-click="selectedValues = getSelectedValues()">Get Selected Values</button>
<p>Selected Values: {{selectedValues}}</p>
在这个例子中,我们创建了一个按钮,当点击按钮时,调用getSelectedValues函数,并将返回的选定值赋给selectedValues变量。然后,我们使用插值表达式将selectedValues显示在页面上。
这样,当用户选择复选框时,checkboxValues对象的属性值会自动更新,而点击按钮时,就可以获取选定的值并显示在页面上。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云