使用 angular js 检查每 html 行的单个复选框

Question

我有一个 table 加载多个复选框和 selectboxes.when 我点击一个复选框或 select 框它自动 select 每隔一个框 table .我希望可以选择每行单独选择一个复选框或 select 框。

  <tr id="TableBody" ng-repeat="code in Register.RegisterDetails">
            <td>{{$index+1}}</td>
            <td   ng-bind="code .CodeID"><input type="text" ng-model="Register.CodeID" /></td>
            <td   ng-bind="code .name"><input type="text" ng-model="Register.Firstname" /></td>
            <td   ng-bind="code .Lastname"><input type="text" ng-model="Register.Lastname" /></td>
            <td><input type="checkbox" ng-model="Register.Presentstatus" id="PresentCheckbox" name="PresentCheckbox" /></td>
            <td><select id="reasons" name="reasons" ng-model="Register.Category" ng-disabled="Register.Presentstatus" ng-clicked="Register.Presentstatus && O" ></td>

        </tr>

我获取数据的模块

function Register(){ self.RegisterDetails = function () {
    var params = { pass params here };
    return $http.get
        {
            url: GetRegisterDetails,
            params: params,
            success: function (data) {

                self.RegisterDetails = data.data;

            }
        });
}

我的控制器

ngAppModule.controller('RegisterController',['$scope','$http',function($scope,$http)
{
    var self = this;
   $scope.Register = new Register($http);

}]);

以上所有代码都可以正常工作。我只是不知道如何检查每个 row.sorry 我是这个网站的新手

Answer 1

因为你的 ng-model="Register.Presentstatus" 是重复的并且对所有行都是相同的所以你对所有行都有相同的绑定。您可以更改它们以具有不同的绑定

Answer 2

您运行遇到的主要问题是您在 ng-repeat 中绑定了错误的 this。

您的 HTML 当前为每个 code 重复一个复选框，但将其绑定到 相同的 对象属性 Register.Presentstatus .

  <tr id="TableBody" ng-repeat="code in Register.RegisterDetails">
       <td>{{$index+1}}</td>
       ....
       <td><input type="checkbox" ng-model="Register.Presentstatus" .../></td>
  </tr>

如果您希望每一行都有独立的复选框，则需要将其绑定到特定行（code 特定）属性。也许您正在寻找将复选框绑定到数组中的元素的东西：

  <tr id="TableBody" ng-repeat="code in Register.RegisterDetails">
       <td>{{$index+1}}</td>
       ....
       <td><input type="checkbox" ng-model="Register.Presentstatus[$index]" .../></td>
  </tr>

或实际绑定到 code 对象的属性

  <tr id="TableBody" ng-repeat="code in Register.RegisterDetails">
       <td>{{$index+1}}</td>
       ....
       <td><input type="checkbox" ng-model="code.Presentstatus" .../></td>
  </tr>

使用 angular js 检查每 html 行的单个复选框

checking a single checkbox per html row using angular js

html

checkbox

angularjs