如何使用Angularjs中的复选框获取表格行数据答案

【问题标题】：How to get table row data using check box in Angular.js如何使用Angularjs中的复选框获取表格行数据
【发布时间】：2017-01-30 22:37:47
【问题描述】：

我需要一个帮助。我需要使用 Angular.js 从表格行中获取所有检查的数据。我在下面解释我的代码。

<tr ng-repeat="gl in galleryDatas">
<td><input type="checkbox" name=""> {{$index+1}}</td>
<td><img ng-src="upload/{{gl.image}}" border="0" name="image" style="width:100px; height:100px;" /></td>
<td>{{gl.description}}</td>
</tr>

这里我需要当用户单击复选框时，相应的行数据将检索到一个数组中。请帮助我。

【问题讨论】：

值得一看，小提琴似乎是您想要实现的目标：http://stackoverflow.com/a/14835160/4045532
How to bind to list of checkbox values with AngularJS?的可能重复

标签： javascript angularjs

【解决方案1】：

你可以通过这个过程实现

在你的控制器中：

$scope.galleryDatas = [
  {
        name: 'something',
        description: "name 1"
    },
    {
        name: 'another',
        description: "name 2"
    }
  ];

  $scope.checkedValue = [];

  $scope.saveInArray = function(index) {
    if($scope.galleryDatas[index].checked) {
      $scope.checkedValue.push($scope.galleryDatas[index]);
    } else {
       var newIndex = $scope.checkedValue.map(function(e) { return e.name; }).indexOf($scope.galleryDatas[index].name);
       // for compare instead of "name" you should use that field is unique. ie: e.uniqueField
       // and $scope.galleryDatas[index].uniqueField
       if(newIndex !== -1)
          $scope.checkedValue.splice(newIndex,1);
    }

  };

注意：选中的行数据存储在$scope.checkedValue 数组中，未选中时从$scope.checkedValue 数组中删除

和HTML：

<td><input type="checkbox" ng-model="gl.checked" ng-click="saveInArray($index)"> {{$index+1}}</td>

【讨论】：

【解决方案2】：

在复选框上使用 ng-change

<td><input type="checkbox" ng-change="clickedRow(gl.checked)" name="" ng-model="gl.checked"></td>

在控制器中，

$scope.clickedRow = function(checked) {
 if (checked) {
  //add to the list
   } else {
 // remove from list
  }
}

【讨论】：