Question

我需要验证复选框组的最小和最大选择。我创建了自定义指令来验证这一点。

在custom指令中，虽然基于最小和最大选择逻辑来设置ctrl。$ setValidity，但ctrl。$ setValidity不会刷新或无法正常工作。

是否有任何指令要验证复选框组（最小和最大）

查看代码：

<html ng-app="myApp">
<head>
<title>AngularJS Routing</title>
<script>
    document.write('<base href="' + document.location + '" />');
</script>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="http://code.angularjs.org/1.2.7/angular.js"></script>
<script src="http://code.angularjs.org/1.2.7/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<form name="form">
    <label ng-repeat="e in ccdata">
        <input class="icheck"
            name="test"
            type="checkbox"
            ng-model="e.value"
            minlength="2"
            maxlength="4"
            data="{{ccdata}}"
            evennumber />
        &nbsp;{{e["name"]}} &nbsp; &nbsp;
    </label>
    {{form.test.$error.minmax}}
</form>
</body>
</html>

控制器代码：

'use strict';
var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope) {
$scope.ccdata = [{ "name": "1", "value": false },
                 { "name": "2", "value": false },
                 { "name": "3", "value": false },
                 { "name": "4", "value": false },
                 { "name": "5", "value": false },
                 { "name": "6", "value": false }];

   console.log($scope.ccdata);

 });

 app.directive('evennumber', [function () {

  var link = function ($scope, $element, $attrs, ctrl) {
      var validate = function (viewValue) {
          var obj = $attrs.data;
          var count = (fnGetCHLDataSource(JSON.parse($attrs.data))).length;
          var min = $attrs.minlength;
          var max = $attrs.maxlength;
          console.log(min + "--" + max + "--" + count);
          if ((min != '' && min > 0) && (max != '' && max > 0)) {
              console.log((min <= count) && (max >= count));
              ctrl.$setValidity('minmax', ((min <= count) && (max >= count));
          }
          return viewValue;
      };

      ctrl.$parsers.unshift(validate);

      $attrs.$observe('evennumber', function (comparisonModel) {
          return validate(ctrl.$viewValue);
      });

      $scope.$watch($attrs['ngModel'], function (newValue) {
          validate(ctrl.$viewValue);
      })

  };

  return {
      require: 'ngModel',
      link: link
  };

  }
  ]);

  function fnGetCHLDataSource(data) {
      for (var i = 0; i < data.length; i++) {
          delete data[i]["$$hashKey"];
      }
  var resultArr = [];
  var i = 0;
  $.each(data, function (key, value) {
    var availFlag;
    for (var val in value) {
        if (i % 2 == 0) {
            availFlag = value[val];
        }
        if (i % 2 == 1 && (value[val] == true)) {
            resultArr.push(availFlag);
        }
        i++;
     }
 })
  return resultArr;
}

Answer 1

对于复选框 添加这些并根据您的要求进行改进，这是一条适合您的道路;

<input ng-disabled="(count>max) && (!d.check)" type="checkbox" ng-checked="d.check" ng-model="d.value" minlength="2" maxlength="4" ng.click="countCheck(d)"/>

JS：

$scope.count = 0;
$scope.max = 3;
//You can swap it with ".watch"
yourController.countCheck = function(d){
    if(d.check){
        $scope.count++;
    }else{
        $scope.count--;
    }
}

angularjs复选框组最小和最大选择验证

1 个答案: