Question

我一直在搜索这里的帖子但是找不到答案。

当用户在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.
}

我该怎么做？谢谢！

Answer 1

角度解决方案可以在这里看到：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事件，传递给在产品范围内添加函数，然后检查selected_products数组上的product.name索引，如果它不存在，则添加它，如果它已经存在，则将其删除。这种方式selected_products匹配选中的复选框。

Answer 2

在HTML中使用ng-model =“product.selected”

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

在你的添加功能中，你不需要在selectedProducts上保留$scope，除非你想在某个地方的视图中显示它，或者可能因为某种原因看到它...... / p>

我建议只需构建该数组，并在需要时在add（）函数的闭包中使用它。

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使用Array.prototype.filter（如果IE8不是问题）

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

  // TODO: do something with selectedProducts.
};

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

2 个答案: