Question

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

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

在上表中，有一个名称列和带有复选框的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

您的复选框数组很难使用。因此，只需要重新排列一下即可。从2D复选框数组开始，并全部填充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-model而不是在复选框上使用ng-click来设置数据数组上的值，从而使以后在收集这些信息时更加容易。

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

}

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

2 个答案: