如何使用angularjs中的文本框值检查表格？

Question

我需要在文本框值的基础上选择复选框，例如：如果我在文本框中输入 5，然后我单击全选复选框，之后应该只选择表的前 5 行，否则它应该选择所有复选框。我如何使用 angularjs 来实现这一点，我附上了下面的代码，请仔细阅读

var app = angular.module('MyApp', [])
app.controller('MyController', function($scope) {
  $scope.Customers = [{
      CustomerId: 1,
      Name: "John Hammond",
      Country: "United States",
      Selected: false
    },
    {
      CustomerId: 2,
      Name: "Mudassar Khan",
      Country: "India",
      Selected: false
    },
    {
      CustomerId: 3,
      Name: "Suzanne Mathews",
      Country: "France",
      Selected: false
    },
    {
      CustomerId: 4,
      Name: "Robert Schidner",
      Country: "Russia",
      Selected: false
    },
    {
      CustomerId: 2,
      Name: "Mudassar Khan",
      Country: "India",
      Selected: false
    },
    {
      CustomerId: 3,
      Name: "Suzanne Mathews",
      Country: "France",
      Selected: false
    },
    {
      CustomerId: 2,
      Name: "Mudassar Khan",
      Country: "India",
      Selected: false
    },
    {
      CustomerId: 3,
      Name: "Suzanne Mathews",
      Country: "France",
      Selected: false
    }
  ];

  $scope.CheckUncheckHeader = function() {
    $scope.IsAllChecked = true;
    for (var i = 0; i < $scope.Customers.length; i++) {
      if (!$scope.Customers[i].Selected) {
        $scope.IsAllChecked = false;
        break;
      }
    };
  };
  $scope.CheckUncheckHeader();

  $scope.CheckUncheckAll = function() {
    for (var i = 0; i < $scope.Customers.length; i++) {
      $scope.Customers[i].Selected = $scope.IsAllChecked;
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="MyApp" ng-controller="MyController">
  <table cellpadding="1" cellspacing="1" border="1">
    <tr>
      <th align="left">
        <label>
                        <input type="checkbox" ng-model="IsAllChecked" ng-change="CheckUncheckAll()" />
                        CustomerId</label>
        <br>
        <input id="txtCheckCount" type="text" class="form-control input-sm" ng-model="chkCount" style="width: 45px;"></input>
      </th>
      <th>
        Name
      </th>
      <th>
        Country
      </th>
    </tr>
    <tbody ng-repeat="m in Customers">
      <tr>
        <td>
          <label for="chkCustomer_{{m.CustomerId}}">
                            <input id="chkCustomer_{{m.CustomerId}}" type="checkbox" ng-model="m.Selected" ng-change="CheckUncheckHeader()" />
                            {{m.CustomerId}}
                        </label>
        </td>
        <td>
          {{m.Name}}
        </td>
        <td>
          {{m.Country}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

你快到了:)。我只是从输入的 ngModel 中获取值。解析它，如果它是一个数字并且它小于它将在循环中使用它的总计数，否则它使用长度（它在原始帖子中的长度）。请参阅下面的代码。

var app = angular.module('MyApp', [])
app.controller('MyController', function($scope) {
  $scope.Customers = [{
      CustomerId: 1,
      Name: "John Hammond",
      Country: "United States",
      Selected: false
    },
    {
      CustomerId: 2,
      Name: "Mudassar Khan",
      Country: "India",
      Selected: false
    },
    {
      CustomerId: 3,
      Name: "Suzanne Mathews",
      Country: "France",
      Selected: false
    },
    {
      CustomerId: 4,
      Name: "Robert Schidner",
      Country: "Russia",
      Selected: false
    },
    {
      CustomerId: 2,
      Name: "Mudassar Khan",
      Country: "India",
      Selected: false
    },
    {
      CustomerId: 3,
      Name: "Suzanne Mathews",
      Country: "France",
      Selected: false
    },
    {
      CustomerId: 2,
      Name: "Mudassar Khan",
      Country: "India",
      Selected: false
    },
    {
      CustomerId: 3,
      Name: "Suzanne Mathews",
      Country: "France",
      Selected: false
    }
  ];

  $scope.CheckUncheckHeader = function() {
    $scope.IsAllChecked = true;
    for (var i = 0; i < $scope.Customers.length; i++) {
      if (!$scope.Customers[i].Selected) {
        $scope.IsAllChecked = false;
        break;
      }
    };
  };
  $scope.CheckUncheckHeader();

  $scope.CheckUncheckAll = function() {
var chkCnt = parseInt($scope.chkCount);
if(chkCnt > $scope.Customers.length || isNaN(chkCnt)){
chkCnt = $scope.Customers.length
}
    for (var i = 0; i < chkCnt; i++) {
      $scope.Customers[i].Selected = $scope.IsAllChecked;
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="MyApp" ng-controller="MyController">
  <table cellpadding="1" cellspacing="1" border="1">
    <tr>
      <th align="left">
        <label>
                        <input type="checkbox" ng-model="IsAllChecked" ng-change="CheckUncheckAll()" />
                        CustomerId</label>
        <br>
        <input id="txtCheckCount" type="text" class="form-control input-sm" ng-model="chkCount" style="width: 45px;"></input>
      </th>
      <th>
        Name
      </th>
      <th>
        Country
      </th>
    </tr>
    <tbody ng-repeat="m in Customers">
      <tr>
        <td>
          <label for="chkCustomer_{{m.CustomerId}}">
                            <input id="chkCustomer_{{m.CustomerId}}" type="checkbox" ng-model="m.Selected" ng-change="CheckUncheckHeader()" />
                            {{m.CustomerId}}
                        </label>
        </td>
        <td>
          {{m.Name}}
        </td>
        <td>
          {{m.Country}}
        </td>
      </tr>
    </tbody>
  </table>
</div>