Question

我想通过点击按钮将所选行的数据发送到后端。我可以通过为表格的每一行设置一个“移动”按钮来实现这一点，但我的用例是不同的。我在表的顶部有一个按钮，我必须先选择行，然后单击“移动”按钮将所选行的数据发送到后端。我正在使用智能表模块进行数据网格。

这是我的HTML代码

<body ng-controller="mainCtrl">
  <div class="table-container">

    <button type="button" ng-click="moveToSafe(row)" class="btn btn-sm btn-success">
      Move to safe
    </button>

    <table st-table="rowCollection" class="table">
      <thead>
        <tr>
          <th st-sort="firstName">first name</th>
          <th st-sort="lastName">last name</th>
          <th st-sort="birthDate">birth date</th>
          <th st-sort="balance">balance</th>
        </tr>
      </thead>
      <tbody>
        <tr st-select-row="row" ng-repeat="row in rowCollection">
          <td>{{row.firstName | uppercase}}</td>
          <td>{{row.lastName}}</td>
          <td>{{row.birthDate | date}}</td>
          <td>{{row.balance | currency}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ng-show="isLoading" class="loading-indicator"></div>
</body>

我的JS代码

angular
  .module('myApp', ['smart-table'])
  .controller('mainCtrl', ['$scope',
    function($scope) {

      $scope.isLoading = false;
      $scope.rowCollection = [{
        firstName: 'Laurent',
        lastName: 'Renard',
        birthDate: new Date('1987-05-21'),
        balance: 102
      }, {
        firstName: 'Blandine',
        lastName: 'Faivre',
        birthDate: new Date('1987-04-25'),
        balance: -2323.22
      }, {
        firstName: 'Francoise',
        lastName: 'Frere',
        birthDate: new Date('1955-08-27'),
        balance: 42343
      }];

      $scope.moveToSafe = function(row) {
        console.log(row);
        // I want the selected row data here inside 'row'
      };
    }
  ]);

Answer 1

根据您的变量更改此变量名称。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>

        angular.module('myApp', []).controller('namesCtrl', function($scope) {
            $scope.isLoading = false;
            $scope.checkedData = [];
                    $scope.rowCollection = [{
                      firstName: 'Laurent',
                      lastName: 'Renard',
                      birthDate: new Date('1987-05-21'),
                      balance: 102
                    }, {
                      firstName: 'Blandine',
                      lastName: 'Faivre',
                      birthDate: new Date('1987-04-25'),
                      balance: -2323.22
                    }, {
                      firstName: 'Francoise',
                      lastName: 'Frere',
                      birthDate: new Date('1955-08-27'),
                      balance: 42343
                    }];

                    $scope.collectedData = function(val){
                        $scope.checkedData.push(val);
                    }

                    $scope.moveToSafe = function() {
                      console.log($scope.checkedData)
                    };
        })
    </script>
</head>
<body ng-app="myApp" ng-controller="namesCtrl">
    <div class="table-container">
        <button type="button" ng-click="moveToSafe()" class="btn btn-sm btn-success">
            Move to Safe
        </button>
        <table st-table="rowCollection" class="table">
        <thead>
          <tr>
            <th st-sort="firstName">first name</th>
            <th st-sort="lastName">last name</th>
            <th st-sort="birthDate">birth date</th>
            <th st-sort="balance">balance</th>
            <th>Select </th>
          </tr>
        </thead>
        <tbody>
          <tr st-select-row="row" ng-repeat="row in rowCollection">
            <td>{{row.firstName | uppercase}}</td>
            <td>{{row.lastName}}</td>
            <td>{{row.birthDate | date}}</td>
            <td>{{row.balance | currency}}</td>
            <td><input type="checkbox" ng-modal="checkedData" ng-click="collectedData(row)"></td>
          </tr>
        </tbody>
      </table>
    </div>  
</body>

Answer 2

您应该在ng-repeat中放置按钮，然后只有行变量将保持其值

 <tr st-select-row="row" ng-repeat="row in rowCollection">
          <td>{{row.firstName | uppercase}}</td>
          <td>{{row.lastName}}</td>
          <td>{{row.birthDate | date}}</td>
          <td>{{row.balance | currency}}</td>
           <button type="button" ng-click="moveToSafe(row)" class="btn btn-sm btn-success">
      Move to safe
    </button>
 </tr>

将所选行数据作为按钮单击

2 个答案: