Question

我想知道如何获取下面plunkr中所选行的表行值。在使用表格中的复选框选择行并单击更新按钮时，我需要行ID，行名称，行值。这是plunkr - https://plnkr.co/edit/9wWxczEH22aG71RN3B0Q?p=preview

html code:
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <table style="width:100%;overflow: scroll; border: 2px solid #AAA; ">
        <thead style="border-bottom: 1px solid #AAA">
            <tr>

                <th style="width:50%">&nbsp;&nbsp;<input type='checkbox'/>&nbsp;&nbsp; catalog</th>
                <th style="width:25%">currentVersion</th>
                <th style="width:25%">new Version</th>
            </tr>
        </thead>
        <tbody style="color: #007db8;">
            <tr id='1' name='MT' >
                <td style="width:50%"> 
                    &nbsp;&nbsp;<input type='checkbox' />&nbsp;&nbsp;Multiple
                </td>
                <td style="width:25%">1.2</td>
                <td style="width:25%">1.3</td>
            </tr>
        </tbody>
    </table>
    <button style="font-size: 11px;" type="button" class="btn btn-primary" >Update</button>
  </body>

</html>

Answer 1

你有很多选择来获得每一行的价值，这里有一个选项，使用ng-repeat和ng-model

angular.module('test', [])
.controller('test', function ($scope) {
  $scope.itemSelecteds = {};
  $scope.dummyModel = {};
  $scope.items = [{
    id: 1,
    name: 'mit',
    catalog: 'Multiple',
    currentVersion: '1.2',
    newVersion: '1.3',
  }, {
    id: 2,
    name: 'mit',
    catalog: 'Multiple',
    currentVersion: '1.2',
    newVersion: '1.3',
  }, {
    id: 3,
    name: 'mit',
    catalog: 'Multiple',
    currentVersion: '1.2',
    newVersion: '1.3',
  }];
  
  $scope.selectItem = function (item) {
    // If checkbox is checked
    if ($scope.dummyModel[item.id]) {
      $scope.itemSelecteds[item.id] = item;
    } else {
      delete $scope.itemSelecteds[item.id];
    }
  }
  
  $scope.update = function () {
    console.log($scope.itemSelecteds);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test" ng-controller="test">
    <table style="width:100%;overflow: scroll; border: 2px solid #AAA; ">
        <thead style="border-bottom: 1px solid #AAA">
            <tr>
                
                <th style="width:50%">&nbsp;&nbsp;<input type='checkbox'/>&nbsp;&nbsp; catalog</th>
                <th style="width:25%">currentVersion</th>
                <th style="width:25%">new Version</th>
            </tr>
        </thead>
        <tbody style="color: #007db8;">
            <tr ng-repeat="item in items" ng-attr-id="item.id">
                <td style="width:50%"> 
                    &nbsp;&nbsp;<input type='checkbox' ng-model="dummyModel[item.id]" ng-change="selectItem(item)"/>&nbsp;&nbsp;{{ item.catalog }}
                </td>
                <td style="width:25%">{{ item.currentVersion }}</td>
                <td style="width:25%">{{ item.newVersion }}</td>
            </tr>
        </tbody>
    </table>
    <button style="font-size: 11px;" type="button" class="btn btn-primary" ng-click="update()" >Update</button>
  </body>

Answer 2

使用ng-checked事件来启动检查事件，但如果您要同时处理检查和未检查事件，请尝试ng-click

这里将为您提供输入元素。您可以使用elemnt.parent.parent获取td或tr及其值

function doSomething(element){

  var parent=elemnt.parent.parent;
  // do something

}

如何在单击Angularjs按钮时获取表行值

2 个答案: