angularjs复选框组最小和最大的选择验证 [英] angularjs checkbox group minimum and maximum selection validation
本文介绍了angularjs复选框组最小和最大的选择验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要验证的复选框组最小和最大的选择。上午创建自定义指令来验证这一点。
在自定义的指令，而基于最小和最大的选择逻辑来设置Ctrl键。$ setValidity，但Ctrl键。$ setValidity没有得到刷新或无法正常工作。
有任何指令验证复选框组（最小和最大）
查看code：
＆LT; HTML NG-应用=对myApp＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT; AngularJS路由和LT; /标题＆GT;
＆LT;脚本＆GT;
文件撰写（'＆LT;基本href =+ document.location +'/＆GT;'）;
＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-2.0.3.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.2.7/angular.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.2.7/angular-route.js＆GT;＆下; /脚本＆GT;
＆LT;脚本的src =// cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js\"></script>
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;＆LT;机身NG控制器=MainCtrl＆GT;
＆LT;表格名称=形式＆GT;
＆LT;标签NG重复=E在ccdata＆GT;
＆LT;输入类=I确认
NAME =测试
类型=复选框
NG-模式=e.value
MINLENGTH个=2
MAXLENGTH =4
数据={{ccdata}}
evennumber /＆GT;
＆安培; NBSP; {{E [名称]}}＆放大器; NBSP; ＆安培; NBSP;
＆LT; /标签＆gt;
{{form.test。$ error.minmax}}
＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
控制器code：
使用严格的;
VAR应用= angular.module（'对myApp'，[]）;app.controller（'MainCtrl'，函数（$范围）{
$ scope.ccdata = [{名：1，价值：虚假}，
{名：2，价值：虚假}，
{名：3，价值：虚假}，
{名：4，价值：虚假}，
{名：5，值：虚假}，
{名：6，价值：假}]; 的console.log（$ scope.ccdata）; }）; app.directive（'evennumber'，[功能（）{ VAR链接=功能（$范围，$元，$ ATTRS，CTRL）{
VAR验证=功能（viewValue）{
VAR OBJ = $ attrs.data;
变种数=（fnGetCHLDataSource（JSON.parse（$ attrs.data）））的长度。
变种分钟= $ attrs.minlength;
VAR最大= $ attrs.maxlength;
的console.log（分+ - + MAX + - +计数）;
如果（（分=！＆放大器;＆放大器;分大于0）及及（最大值=！''＆放大器;＆放大器;最大大于0））{
的console.log（（分钟＆lt; =计数）及及（MAX＆GT; =计数））;
CTRL $ setValidity（最小最大，（（分钟＆lt; =计数）及及（MAX＆GT; =计数））;
}
返回viewValue;
}; CTRL $ parsers.unshift（验证）。 $ ATTRS。观察$（'evennumber'，函数（comparisonModel）{
返回的validate（CTRL $ viewValue）;
}）; $范围。$腕表（$ ATTRS ['ngModel']，功能（newValue）以{
验证（CTRL $ viewValue）;
}） }; 返回{
要求：'ngModel'，
链接：链接
}; }
]）; 功能fnGetCHLDataSource（数据）{
对于（VAR I = 0; I＆LT; data.length;我++）{
删除数据[I] [$$ hashKey];
}
变种resultArr = [];
变种I = 0;
$。每个（数据，功能（键，值）{
VAR availFlag;
对（价值VAR VAL）{
如果（ⅰ％2 == 0）{
availFlag =值[VAL]
}
如果（ⅰ％2 == 1＆放大器;及（值[VAL] ==真））{
resultArr.push（availFlag）;
}
我++;
}
}）
返回resultArr;
}
解决方案
对于复选框
添加这些，改善您的需求这对你道路;
＆LT;输入NG-禁用=（计数＆GT;最大）及及（！d.check）TYPE =复选框NG-检查=d.check NG-模式=d.valueMINLENGTH个=2MAXLENGTH =4ng.click =countCheck（四）/＆GT;
记者：
$ scope.count = 0;
$ scope.max = 3;
//你可以用.watch掉它
yourController.countCheck =函数（D）{
如果（d.check）{
$ scope.count ++;
}其他{
$ scope.count--;
}
}
I need to validate minimum and maximum selection on checkbox group. am created the custom directives to validate this.
In custom directive, while based on minimum and maximum selection logic to set ctrl.$setValidity, but ctrl.$setValidity doesn't get refresh or not working.
Is there any directive to validate checkbox group(Min and Max)
View Code:
<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 />
{{e["name"]}}
</label>
{{form.test.$error.minmax}}
</form>
</body>
</html>
Controller code:
'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;
}
解决方案
For checkboxes Add these and improve for your requests it's a road for you;
<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复选框组最小和最大的选择验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
