如何从 table 按行和列获取 ng-repeat 复选框值

Question

我有一个 table 主要由复选框组成。这是它的外观的简化版本。

Name    |  A |  B |  C |  D |  E |
--------|----|----|----|----|----|
James   | [] | [X]| [] | [] | [] |
--------|----|----|----|----|----|
Micheal | [x]| [] | [] | [] | [] |
--------|----|----|----|----|----|
Peter   | [] | [] | [] | [x]| [] |
--------|----|----|----|----|----|
Eddy    | [] | [] | [] | [] | [] |
--------|----|----|----|----|----|

在上面的 table 中，有一个名称列和带有复选框的 A 到 E 列。我的问题是如何使用该行的关联 name_id 获取选中复选框的值。每列也有一个不同的 id。因此，例如上述示例的对象可以是：

{
  table_id:1
  checked_boxes: [
                   {name_id:10, col_id:2},
                   {name_id:20, col_id:1},
                   {name_id:30, col_id:4}
                 ]
}

这是我的 tbody 和 ng-repeat:

<tbody>
   <tr ng-repeat="item in names track by $index">
      <td id="{{item.name_id}}">{{item.name}}</td>
      <td ng-repeat="col in cols">
         <input type="checkbox" value="" class="form-control" ng-model="selected[col.col_id]" />
      </td>
   </tr>
</tbody>

我需要在 tbody 中做任何调整吗？我怎样才能得到上面显示的所需对象，特别是 checked_boxes？我已经尝试了多种方法 push 将值转换为 checked_boxes 空数组但没有成功。

Answer 1

您的复选框数组很难使用。所以这只是需要一些重新安排。从复选框的二维数组开始，并用 false 值填充它。然后运行通过已知的复选框并找到它们的行和列索引，然后简单地用 ng-model="checkboxes[$parent.$index][$index]".

显示它

这是我的演示版本：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  var n = $scope.names = [
    {name_id:10, name:"Micheal"},
    {name_id:20, name:"James"},
    {name_id:30, name:"Peter"},
    {name_id:40, name:"Eddy"}
  ];
  var c = $scope.cols = [
    {col_id:1},
    {col_id:2},
    {col_id:3},
    {col_id:4},
    {col_id:5}
  ];

  var checked_boxes = [
    {name_id:10, col_id:2},
    {name_id:20, col_id:1},
    {name_id:30, col_id:4}
  ];
  
  $scope.checkboxes = n.map( function(x) {
    return c.map( function(y) { 
      return false;
    });
  })
  
  for(var i=0; i<checked_boxes.length; i++){
    var ni = n.map(function(_) { return _.name_id; }).indexOf(checked_boxes[i].name_id); // match the index of `name_id`
    var ci = checked_boxes[i].col_id-1; // or like above -> c.map(...).indexOf(...) // but for `col_id`
    $scope.checkboxes[ni][ci] = true;
  }
  
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <table>
      <tr ng-repeat="item in names track by $index">
        <td>{{item.name}}</td>
        <td ng-repeat="col in cols">
          <input type="checkbox" value="" class="form-control" ng-model="checkboxes[$parent.$index][$index]" />
        </td>
      </tr>
    </table>

  </div>

</body>

</html>

Answer 2

我已经为你做了一个小例子，这样你就可以更简单了。我的建议如下：

您可以更改为 ng-click 以在数据数组上设置值，而不是在您的复选框上使用 ng-model，如果您想稍后收集此信息，则更容易.

<div ng-app="questions">
     <div  ng-controller="QuestionController as ctrl">
     <table>
         <thead>
           <tr>
            <th>Name</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
           </tr>
         </thead>
         <tbody>
           <tr ng-repeat="item in ctrl.questions track by $index">
              <td id="{{item.name_id}}">{{item.name}}</td>
                <td ng-repeat="col in ctrl.cols">
                   <input type="checkbox" class="form-control" ng-click="ctrl.selectOption(item, col)"/>
                </td>
           </tr>
         </tbody>
      </table>
     <button ng-click="ctrl.load()">
          Load button data
     </button>
     </div>
</div>

在您的 javascript 中，您将拥有以下内容：

angular.module('questions', []);
angular.module('questions').controller('QuestionController', QuestionController);

function QuestionController () {
  var ctrl = this;
  ctrl.questions = [{
    name: 'Name 1',
    name_id: 'Name_1',
    selectedOption: ''
  },{
    name: 'Name 2',
    name_id: 'Name_2',
    selectedOption: ''
  },{
    name: 'Name 3',
    name_id: 'Name_3',
    selectedOption: ''
  }];

  ctrl.cols = ['A', 'B', 'C', 'D', 'E'];

  ctrl.selectOption = function (entry, selectedOption) {
    entry.selectedOption = selectedOption;
  };

  ctrl.load = function () {
    angular.forEach(ctrl.questions, function (question) {
      console.log('Name: ' + question.name + ' - Answer: ' + question.selectedOption);
    });
  }

}

如何从 table 按行和列获取 ng-repeat 复选框值

How to get ng-repeat checkbox values by row and column from a table

angularjs

angularjs-ng-repeat