如何在單擊Angularjs按鈕時獲取表行值

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事件來啟動檢查事件，但如果要同時處理check和unchecked事件，請嘗試ng-click

這里將為您提供輸入元素。您可以使用elemnt.parent.parent來獲取td或tr及其值

function doSomething(element){

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

}

如何在單擊Angularjs按鈕時獲取表行值

問題描述

2 個解決方案

解決方案1
2 已采納 2017-03-14 05:29:32

解決方案2
1 2017-03-14 05:15:53

如何在單擊Angularjs按鈕時獲取表行值

問題描述

2 個解決方案

解決方案1 2 已采納 2017-03-14 05:29:32

解決方案2 1 2017-03-14 05:15:53

解決方案1
2 已采納 2017-03-14 05:29:32

解決方案2
1 2017-03-14 05:15:53