首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

获取复选框组Angular 1.6的选定值

可以通过以下步骤实现:

  1. 在HTML模板中,使用ng-model指令将复选框的值绑定到一个变量上。例如:
代码语言:txt
复制
<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,分别对应三个复选框的选中状态。

  1. 在控制器中,定义checkboxValues对象,并创建一个函数来获取选定的值。例如:
代码语言:txt
复制
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数组中。

  1. 在HTML模板中,调用getSelectedValues函数来获取选定的值。例如:
代码语言:txt
复制
<button ng-click="selectedValues = getSelectedValues()">Get Selected Values</button>
<p>Selected Values: {{selectedValues}}</p>

在这个例子中,我们创建了一个按钮,当点击按钮时,调用getSelectedValues函数,并将返回的选定值赋给selectedValues变量。然后,我们使用插值表达式将selectedValues显示在页面上。

这样,当用户选择复选框时,checkboxValues对象的属性值会自动更新,而点击按钮时,就可以获取选定的值并显示在页面上。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器CVM:https://cloud.tencent.com/product/cvm
  • 云数据库MySQL:https://cloud.tencent.com/product/cdb_mysql
  • 云存储COS:https://cloud.tencent.com/product/cos
  • 人工智能AI:https://cloud.tencent.com/product/ai
  • 云原生容器服务TKE:https://cloud.tencent.com/product/tke
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券