如何在angular.js中获取复选框值

BonJon 发表于 Dev

邦琼

我一直在这里搜索线程，但找不到真正的答案。

我试图在用户在Angular中选中复选框时获取其值。我有类似的东西

<div class="checkbox">

<div class="checkbox" ng-repeat="product in products">
    <input type="checkbox" ng-model="product"/> {{product.name}}
</div>

<button ng-click='add()'></button>

我想在我的js中有一些东西

$scope.add = function() {
    //I want to add the checked product in the selectedProduct array
    $scope.selectedProduct = ['product1', 'product2', 'product4']  => the selected products.
}

我该怎么做呢？谢谢！

拉斐尔·巴罗斯（Rafael Barros）

可以在这里看到角度解：http : //plnkr.co/edit/j63po37JBvc3bFdNAl3T

基本上是在ng-change上发送事件

<div class="checkbox" ng-repeat="product in products">
    <input type="checkbox" ng-model="product.selected" ng-change="add(product)"/> {{product.name}}<br>
</div>

我正在考虑您的控制器是这样的：

app.controller('myController', function($scope){
  $scope.products = [
    {'name':'product1', 'selected': false},
    {'name':'product2', 'selected': false},
    {'name':'product4', 'selected': false}
  ];
  $scope.selected_products = [];

  $scope.add = function(prod){
    var index = $scope.selected_products.indexOf(prod.name);
    if(index == -1 && prod.selected){
      $scope.selected_products.push(prod.name);
    } else if (!prod.selected && index != -1){
      $scope.selected_products.splice(index, 1);
    }
  }
})

因此，您有一个具有名称和所选状态的产品对象列表，您使用复选框将所选状态保留在那里，并且当您标记/取消标记状态时，将触发ng-change事件，并传递给add函数在产品范围内，然后检查selected_products数组上的product.name索引，如果不存在，则添加它，如果已经存在，则将其删除。这样，selected_products与选定的复选框匹配。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。