最近做一个项目,应该来说比较简单的输入框验证ip地址而已,允许空值
首先是对ip地址进行检验匹配是否正确,开始我在指令中是这样写的。我输入空格后会提示输入有误,可是这就有一个问题了,我在输入框中删除空格后提示并不会消失,我就想应该先判断dns是否输入空格,可是各种姿势过后我发现没有办法区分是否输入空格。
/**
* 检验ip
*/
jbconsole.directive('checkIp', [function () {
return {
require: "ngModel",
link: function (scope, element, attr, ngModel) {
if (ngModel) {
var ipRegexp = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
}
var customValidator = function (value) {
if (/^\s+$/.test(value)) {
var validity = ipRegexp.test(value);
} else {
validity = ngModel.$isEmpty(value)
}
console.log(validity)
ngModel.$setValidity("checkIp", validity);
return validity ? value : undefined;
};
ngModel.$formatters.push(customValidator);
ngModel.$parsers.push(customValidator);
}
}
}])
jade中
input.form-control(type='text'
name='dns' ng-model='appForm.dns'
placeholder='255.255.255.255'
check-ip)
.text-fail(ng-if='appNewForm.dns.$invalid' ) 输入有误
然后我想是不是angular的ng-model 对空格进行了处理,遂在本地进行了一个测试,监听ipt的值变化,发现空字符和有空格的字符串是有区别的,果然是ng-model对字符串进行了trim()操作
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" name="item" id='ipt' oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" focused>
<div id='iptLength'></div>
</body>
<script type="text/javascript">
var ipt=document.getElementById('ipt')
var iptLength=document.getElementById('iptLength');
var value=ipt.value;
iptLength.innerHTML='当前字符串为'+value.length
function OnInput (event) {
value=ipt.value;
iptLength.innerHTML='当前字符串为'+value.length
}
</script>
</html>
接下来,通过google,发现需要加上ng-trim="false"这个指令就可以了,看来google才是程序员真爱
这个问题虽然是一个小问题,是我对angular学习的不够深刻,记录下来万一大家和我遇到了同样的困扰了呢
在做项目的时候遇到了一个angular打包后的坑,之前在开发环境文件没有压缩混淆之前一切都是正常的,但是压缩后报了这样的错误
我当时就纳闷了,然后就去看代码是否写的规范,是不是分号什么的忘写了什么的。后面才发现自己指令写法有点问题,没有压缩的时候,angular能正常的注入,但是压缩后无法工作
angular.module("myApp").directive("permissionAccess", function($rootscope, $timeout) { });
需要改成
angular.module("myApp").directive("permissionAccess", ['$rootscope','$timeout',function($rootscope, $timeout) { }]);
其实也不是坑,就是写代码呢一定要按规范来
嗯,记录一个并不是anuglar的问题,也不属于坑,但是属于自己对基础知识掌握的不闹靠照成的错误
列子:
$scope.obj = {
'1238fdd' : {a:'1'},
'7614c08' :{a:'1'},
'c7b2636' : {a:'1'},
'39696a0' :{a:'1'},
};
<li ng-repeat="(key,val) in obj">{{key}}_{{val.a}}</li>
得到的结果并不是想的按顺序渲染的
就是ng-repeat 对象时,并不是按照顺序来的,其实就是因为Object类型for in时没有固定顺序的,是无序的
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。