Pass selected row data as an argument on button click

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

<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

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

 <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>

Pass selected row data as an argument on button click

Question

2 answers

solution1
3 2016-12-10 09:34:26

solution2
1 2016-12-10 06:49:08

Pass selected row data as an argument on button click

Question

2 answers

solution1 3 2016-12-10 09:34:26

solution2 1 2016-12-10 06:49:08

solution1
3 2016-12-10 09:34:26

solution2
1 2016-12-10 06:49:08