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

I have been searching the threads here but can't really find the answer.

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

I am trying to get the value for the checked boxes when user check them in Angular. I have something like

当用户以角度检查复选框时，我试图获取它的值。我有类似的

<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>

I want to have something in my js like

我想要一些我喜欢的js

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

How do I do this? Thanks!

我该怎么做呢?谢谢!

2 个解决方案

#1

The angular solution can be seen here: http://plnkr.co/edit/j63po37JBvc3bFdNAl3T

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

It's basically sending the event on ng-change

它基本上是在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>

and I'm considering your controller to be like this:

我认为你的控制器是这样的:

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);
    }
  }
})

So, you have a list of product objects that have a name and the selected state, you use the checkbox to keep the selected state there, and when you mark/unmark it, the ng-change event is triggered, passing to the add function in the scope the product, you then check the product.name index on the selected_products array, if it's not there, you add it, if it is already there, remove it. This way selected_products matches the selected checkboxes.

所以,你有产品对象的列表,有一个名称和所选的状态,使用复选框保持选中状态,而当你马克/取消标记,ng-change事件被触发,通过添加功能的产品范围,然后检查product.name selected_products数组索引,如果它不存在,你添加它,如果它已经存在,删除它。这样selected_products就匹配所选的复选框。

#2

Use ng-model="product.selected" in your HTML

使用ng-model = "产品。在HTML选择”

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

In your add function, you don't need to keep selectedProducts on your $scope unless you want to display it in your view somewhere, or possibly $watch it for some reason...

在add函数中，您不需要将selectedProducts保留在$范围内，除非您希望在视图中某处显示它，或者出于某种原因，$watch……

I'd recommend just building that array and using it within the closure of your add() function whenever you need it.

我建议在您需要的时候在add()函数的闭包中使用它。

JS (for all browsers)

JS(对于所有的浏览器)

$scope.add = function(){
  var selectedProducts = [];
  angular.forEach($scope.products, function(product) {
    if(product.selected) selectedProducts.push(product);
  });

  // TODO: do something with selectedProducts here
};

JS using Array.prototype.filter (if IE8 isn't an issue)

使用Array.prototype JS。过滤器(如果IE8不是问题)

$scope.add = function(){
  var selectedProducts = $scope.products.filter(function(product) {
    return product.selected;
  });

  // TODO: do something with selectedProducts.
};

#1