Javascript 单击按钮时将选定行数据作为参数传递_Javascript_Angularjs_Smart Table

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

javascript angularjs

Javascript 单击按钮时将选定行数据作为参数传递,javascript,angularjs,smart-table,Javascript,Angularjs,Smart Table,我想在单击按钮时将所选行的数据发送到后端。我可以通过为表的每一行设置一个“移动”按钮来实现这一点，但我的用例是不同的。我在表格顶部有一个按钮，我必须先选择行，然后单击“移动”按钮将所选行的数据发送到后端。我正在为数据网格使用智能表格模块这是我的HTML代码 <body ng-controller="mainCtrl"> <div class="table-container"> <button type="button" ng-click="mo

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

这是我的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>

您应该将按钮放在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>


{{row.firstName |大写}}
{{row.lastName}
{{row.birthDate | date}}
{{row.balance | currency}}
移至安全区

您应该将按钮放在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>


{{row.firstName |大写}}
{{row.lastName}
{{row.birthDate | date}}
{{row.balance | currency}}
去保险箱

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

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


角度.module（'myApp'，[]）.controller（'namesCtrl'，function（$scope）{
$scope.isLoading=false；
$scope.checkedData=[]；
$scope.rowCollection=[{
名字：“劳伦特”，
姓氏：“雷纳德”，
出生日期：新日期（'1987-05-21'），
结余：102
}, {
名字：“布兰丁”，
姓氏：“Faivre”，
出生日期：新日期（'1987-04-25'），
余额：-2323.22
}, {
名字：“弗朗索瓦”，
姓氏：“弗雷尔”，
出生日期：新日期（'1955-08-27'），
结余：42343
}];
$scope.collectedData=函数（val）{
$scope.checkedData.push（val）；
}
$scope.moveToSafe=函数（）{
console.log（$scope.checkedData）
};
})
去保险箱
名字
姓
出生日期
平衡
挑选
{{row.firstName |大写}}
{{row.lastName}
{{row.birthDate | date}}
{{row.balance | currency}}

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

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


角度.module（'myApp'，[]）.controller（'namesCtrl'，function（$scope）{
$scope.isLoading=false；
$scope.checkedData=[]；
$scope.rowCollection=[{
名字：“劳伦特”，
姓氏：“雷纳德”，
出生日期：新日期（'1987-05-21'），
结余：102
}, {
名字：“布兰丁”，
姓氏：“Faivre”，
出生日期：新日期（'1987-04-25'），
余额：-2323.22
}, {
名字：“弗朗索瓦”，
姓氏：“弗雷尔”，
出生日期：新日期（'1955-08-27'），
结余：42343
}];
$scope.collectedData=函数（val）{
$scope.checkedData.push（val）；
}
$scope.moveToSafe=函数（）{
console.log（$scope.checkedData）
};
})
去保险箱
名字
姓
出生日期
平衡
挑选
{{row.firstName |大写}}
{{row.lastName}
{{row.birthDate | date}}
{{row.balance | currency}}

我不能为每一行都设置按钮。为了在Stackoverflow上发布代码，我显示了一个按钮，实际上UI有8个按钮，每行上有这么多按钮，表格看起来很难看。请使用单选按钮选择行，然后您可以将模型值传递给moveToSafe方法。我无法为每行设置按钮。为了在Stackoverflow上发布代码，我显示了一个按钮，实际上UI有8个按钮，每行上有这么多按钮，表格看起来很难看。使用单选按钮选择行，然后可以将模型值传递给moveToSafe方法您可以对每行使用复选框来选择行吗？是的，可以这样做。但这有什么帮助呢？此外，通过复选框，我将能够选择多行，并且将多行数据传递给moveToSafe函数将更加困难。您可以使用复选框选择所需的行，最后单击“移动”按钮可以收集所有选中的行数据。。这对你合适吗？我已经实现了，但你能不能使用复选框？这很好，但问题是如何收集所有选中的行数据？等等，我会给你解决方案，但在推之前，你需要检查weather对象是否已经存在。你能为每一行使用复选框来选择行吗？是的，可以这样做。但这有什么帮助呢？此外，通过复选框，我将能够选择多行，并且将多行数据传递给moveToSafe函数将更加困难。您可以使用复选框选择所需的行，最后单击“移动”按钮可以收集所有选中的行数据。。这对你合适吗？我已经实现了，但是你能不能使用checkbox？这很好，但问题是如何收集所有选中的行