Question

我有一个表加载多个复选框和选择框。当我点击一个复选框或选择框时，它会自动选择表格上的每个其他框。我想选择一个复选框或选择每行一个框它拥有。

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

}]);

以上所有代码都运行正常。我只是不知道如何检查每行一个盒子。我是这个网站的新手

Answer 1

因为你的模型=＆＃34; Register.Presentstatus＆＃34;正在重复并且对所有人都是一样的，所以你对所有行都有相同的绑定。你可以改变它们以具有不同的绑定

Answer 2

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

您的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行的单个复选框

2 个答案: