单击按钮时将所选行数据作为参数传递

Question

I want to send the selected row's data on click of a button to back-end. 我想通过单击按钮将所选行的数据发送到后端。 I could achieve that by having a 'Move' button for each row of the table, but my use case is different. 我可以通过为表的每一行都具有一个“移动”按钮来实现这一点，但是我的用例是不同的。 I have a single button on the top of the table and I have to select the row first and then click on the 'Move' button to send the selected row's data to back-end. 我在表格顶部只有一个按钮，我必须先选择该行，然后单击“移动”按钮以将所选行的数据发送到后端。 I am using Smart-table module for data grid. 我正在使用智能表模块进行数据网格处理。

Here is my HTML code 这是我的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>

My JS code 我的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

Change this variable names according to your variables. 根据您的变量更改此变量名称。

<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

You should place button inside the ng-repeat, then only row variable will hold its value 您应该将按钮放置在ng-repeat内，然后只有row变量将保留其值

 <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 个解决方案

解决方案1
3 2016-12-10 09:34:26

解决方案2
1 2016-12-10 06:49:08

单击按钮时将所选行数据作为参数传递

问题描述

2 个解决方案

解决方案1 3 2016-12-10 09:34:26

解决方案2 1 2016-12-10 06:49:08

解决方案1
3 2016-12-10 09:34:26

解决方案2
1 2016-12-10 06:49:08