ボタンのクリックで選択された行データを引数として渡す

ボタンをクリックして選択した行のデータをバックエンドに送信したい。テーブルの各行に「移動」ボタンを付けることで実現できますが、使用例が異なります。私はテーブルの一番上に一つのボタンがあり、最初に行を選択してから、選択した行のデータをバックエンドに送るために「移動」ボタンをクリックしなければなりません。データグリッドにスマートテーブルモジュールを使用しています。ここでボタンのクリックで選択された行データを引数として渡す

あなたはngのリピート内のボタンを配置する必要があり、私のHTMLコードは、私の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' 
     }; 
    } 
    ]);

出典

2016-12-10 overlord

あなたが行を選択するには、行ごとにチェックボックスを使用することができますか？ –

そうですね。しかし、それはどのように役立つでしょうか？また、チェックボックスを使用すると、複数の行を選択できるようになり、複数の行のデータをmoveToSafe関数に渡すことがより困難になります。 – overlord

あなたはチェックボックスを使用して必要な行を選択することができます、最後にすべてのチェックされた行のデータを収集することができます移動ボタンのonclick ..それはあなたのために大丈夫ですか？私はそれを既に実装しましたが、チェックボックスを使うこともできますか？ –

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

あり、そして唯一の行変数は、その値

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

出典

2016-12-10 06:49:08 Sajeetharan

各行にボタンを付けることはできません。私は1つのボタンを示しているStackoverflow上のコードを投稿するには、実際にはUIが8つのボタンがあり、テーブルは各行の非常に多くのボタンで醜いように見えます。 – overlord

に行を選択するラジオボタンがあり、モデル値をmoveToSafeメソッドに渡すことができます – Sajeetharan

を開催します

変数に応じてこの変数名を変更してください。

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

出典

2016-12-10 09:34:26

ボタンのクリックで選択された行データを引数として渡す

答えて

関連する問題