如何在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>