zoukankan      html  css  js  c++  java
  • Angularjs:实现全选

    html:

    <div class="input-group">
      <span class="input-group-addon" style="background-color: #fff;border:none">状态</span>
      <div ng-model="queryParam.status" class="ui-checkbox ui-checkbox-primary" style="margin-top: 4px;margin-bottom: 0;">
        <label class="ui-checkbox-inline">
          <input type="checkbox" ng-model="all" ng-change="selectAll()">
            <span>全部</span>
        </label>
        <label class="ui-checkbox-inline" ng-repeat = "x in List">
          <input type="checkbox" ng-model="x.checked" ng-change="selectOne()">
          <span>{{x.name}}</span>
        </label>
      </div> </div>

    js:

    $scope.checked = [];
    $scope.selectAll = function () {
      if($scope.all) {
        $scope.checked = [];
        angular.forEach($scope.List, function (i) {
          i.checked = true;
          $scope.checked.push(i.value);
        })
      }else {
        angular.forEach($scope.List, function (i) {
          i.checked = false;
          $scope.checked = [];
        })
      }
    };
    
    $scope.selectOne = function () {
      angular.forEach($scope.List , function (i) {
        var index = $scope.checked.indexOf(i.value);
        if(i.checked && index === -1) {
          $scope.checked.push(i.value);
        } else if (!i.checked && index !== -1){
          $scope.checked.splice(index, 1);
        };
      })
      if ($scope.List.length === $scope.checked.length) {
        $scope.all = true;
      } else {
        $scope.all = false;
      }
    };
  • 相关阅读:
    Spring基础——小的知识点
    Spring总结—— IOC 和 Bean 的总结
    UML 类图
    Spring基础—— 泛型依赖注入
    Spring重点—— IOC 容器中 Bean 的生命周期
    Spring基础—— SpEL
    《大话设计模式》学习笔记13:适配器模式
    《大话设计模式》学习笔记12:状态模式
    《大话设计模式》学习笔记11:抽象工厂模式
    《大话设计模式》学习笔记10:观察者模式
  • 原文地址:https://www.cnblogs.com/koto/p/6290049.html
Copyright © 2011-2022 走看看