Question

我有一些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。

编辑：编辑原始问题详细信息，以指示每次单击复选框时都应发送行信息，而不仅仅是在启用复选框时。

Answer 1

我们可以使用 ng-change 将行数据作为对象发送到控制器。之后，您可以按如下方式检索行数据：

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>

Answer 2

你可以使用这样的东西，

<强> 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*/ ...}

注意：变量的情况可能有误

Answer 3

对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控制器

3 个答案: