如何在angularjs中使用文本框值检查表？ - javascript

我需要根据文本框的值来选择复选框，例如：如果我在文本框中输入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>

参考方案

你快到了:)。我只是从输入的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>

将Web用户控件添加到页面时，asp按钮onclick不会触发 - javascript

我正在使用使用Visual Studio模板创建的Web表单应用程序。模板具有一个内容占位符，该占位符被访问的任何页面的内容替换。有问题的页面有几个服务器控件，例如文本框，标签和按钮。当我单击我的更新按钮时，它可以正常工作，这些值会回传并更新数据库。我想在所有子页面上创建通用的登录提示。我的导航栏（位于我的母版页中）具有引导程序设置。我在导航栏中添加了一个下…

Telerik单选按钮所需的字段验证器 - javascript

如何设置Telerik单选按钮所需的字段验证器？我想在按钮单击“ BtnSave”上设置必填字段验证器吗？请帮忙！<telerik:RadButton ID="radio_male" runat="server" ToggleType="Radio" AutoPostBack="fa…

用symfony隐藏树枝中的表格行 - javascript

我正在开始编码。我正在使用Symfony 3.3我想用复选框隐藏（并显示）表上的a或某些特定行。我尝试使用javascript和jquery。我希望隐藏的行保持隐藏状态。我不知道该怎么做。这是我的树枝{% block body %} <div class="container"> <h3>List of produ…

表单不提交或按钮提交不起作用 - javascript

据我所知，此代码必须有效，但是我编码时却无效问题在于该表单未提交。我该如何解决？选中时，我什至没有得到复选框的值。<table id="example" class="display" cellspacing="0" width="100%"> <thead&g…

在PHP文件中调用javascript函数并在加载HTML文件之后？ - javascript

我需要在我的php中调用js函数，但无法正常工作。有人可以告诉我我在做什么错吗？我该如何轻松地做到这一点？谢谢！我有三个文件：  mail.php负责发送$ _POST的内容（工作正常）。我调用我的javascript函数来切换模式，具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…

推荐标签：, , , ,

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在看。自己强行看了两个月，全部给看完了。感觉这文笔也就我读初中的水平……而且写着国内的一些情况，外国人能理解吗？这书为什么会这么火？这水平我也可以去写呀[笑哭][笑哭][笑哭] 招商银行员工：可以写赶紧写一个啊，能拿科幻文学雨果奖。 包清白：哦 楼主：pei ！tui ！你也配姓龙 楼主：@赵龙王 呵呵 […]