单击行中的复选框时，将行信息发送到angularjs控制器

问题描述：

我有一些使用angularjs来显示表格的html代码。在这张表上，每行都有一个复选框。单击行中的复选框时，将行信息发送到angularjs控制器

表看起来像这样;

这里是html代码。

<div ng-app ng-controller="CheckCtrl"> 
    <table class="table table-hover data-table sort display" style="width:100%"> 
     <thead> 
     <tr> 
      <th class="Serial_"> 
       Serial 
      </th> 
      <th class="Name_"> 
       Name 
      </th> 
      <th class="ID_"> 
       ID 
      </th> 
      <th class="On_off_"> 
       On/off 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="item in check_items"> 
      <td>{{item.SERIAL}}</td> 
      <td>{{item.NAME}}</td> 
      <td>{{item.ID}}</td> 
      <td> <input type="checkbox" ng-checked="item.ON_OFF == '1'"></td> 
     </tbody> 
    </table> 
</div>

这里是我的angularjs控制器代码。

controller('CheckCtrl', ['$scope', '$http', 'configuration', 
    function ($scope, $http, $configuration) { 
     var url_api = $configuration.host + "cloe/webroot/cloe-cloud/app/API.json"; 
     $http.get(url_api).success(function(data) 
     { 
      $scope.check_items = data; 
     });

这就是我想要的。当用户点击复选框时，属于被点击复选框的特定行上所有项目的信息将被发送到angualrjs控制器功能进行处理。点击复选框后，此信息应包含序列号，名称，ID和开/关状态。

我正在使用angularjs v1和twitter bootstrap。

编辑：编辑原始问题的详细信息，以指示单击复选框时不仅发送行信息，而且不仅当复选框被启用时。

答

我们可以用NG-变化发送行数据到控制器对象。之后，你可以检索行数据如下：

var serial = row.SERIAL; 
var name = row.NAME; 
var id = row.ID; 
var onOff = row.ON_OFF;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="CheckCtrl"> 
 
    <table class="table table-hover data-table sort display" style="width:100%"> 
 
     <thead> 
 
     <tr> 
 
      <th class="Serial_"> 
 
       Serial 
 
      </th> 
 
      <th class="Name_"> 
 
       Name 
 
      </th> 
 
      <th class="ID_"> 
 
       ID 
 
      </th> 
 
      <th class="On_off_"> 
 
       On/off 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="item in check_items"> 
 
      <td>{{item.SERIAL}}</td> 
 
      <td>{{item.NAME}}</td> 
 
      <td>{{item.ID}}</td> 
 
      <td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)"></td> 
 
     </tbody> 
 
    </table> 
 
</div> 
 

 
<script> 
 
    var app = angular.module('app',[]); 
 
    app.controller('CheckCtrl', ['$scope', '$http', function ($scope, $http) { 
 
     $scope.check_items = 
 
     [ 
 
      { 
 
      SERIAL:'Test Serial', 
 
      NAME:'Test Name', 
 
      ID : 10, 
 
      ON_OFF : '1' 
 
      } 
 
     ]; 
 

 
     $scope.rowSelected = function(row) 
 
     { 
 
      console.log(row); 
 
     }; 
 
    }]); 
 
    </script>

Natiq，谢谢你的回答。 Upvoted。这几乎是我想要的。我的问题细节不清楚。我仍然有一个小问题。我希望在单击复选框时将行发送信息。您的代码在启用复选框时发送行信息，但当复选框被禁用时，不会发送任何内容。我会编辑我的问题的细节更清晰。 – user781486

@ user91579631，我已经使用条件（** if（row.selected）**）。如果您想要以既选状态和未选状态检索数据，则可以删除条件。我会更新我的答案。 – Natiq

@ user91579631，此更新有助于您吗？ – Natiq

答

你也许可以用这样的事情，

HTML：

<input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-change="checkSubmit(item.serial,item.name,item.id,item.on_off)">

JS：

function checkSubmit(serial,name,id,on_off){

... /*Processing can happen now with the parameters obtained*/ ...}

注：变量的情况下，可能是错误的

答

一些修改，由Natiq提供了答案。

修改此线

<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-model="item.selected" ng-change="rowSelected(item)"></td>

到

<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-model="item.selected" ng-click="rowSelected(item)"></td>

的修饰是从ng-change到ng-click。这样可以解决您的问题，即第一次点击无效，但只有后续点击才能根据发布的评论进行工作。使用ng-click确保每次点击都能被检测到。

单击行中的复选框时，将行信息发送到angularjs控制器

相关推荐