欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

Angularjs之ngModel中的值验证绑定方法

时间:2021-02-26 10:54:45|栏目:AngularJS|点击:

众所周知,在Angular中ngModel为动态双向绑定,存在两种方式。

例如,

方式一:

在html中,

<input type="text" ng-model="searchText" />
<button ng-click="check(searchText)">Check!</button>
{{ searchText }}

在controller中

$scope.check = function (searchText) {
 console.log(searchText);
}

方式二:

引用stackoverflow的一句话,

“If you use ng-model, you have to have a dot in there.” 
Make your model point to an object.property and you'll be good to go.

在html中,

<input ng-model="formData.searchText"/>
<button ng-click="check()">Check!</button>

在controller中,

$scope.formData = {};
$scope.check = function () {
 console.log($scope.formData.searchText.$modelValue);
}

但是我们常常会对ngModel当中的值进行验证,例如,

<input type="password" pattern="[0-9]*" placeholder="请输入6位新密码" ng-model="password.new_password" ng-blur="validateLength()">
<input type="password" ng-model="password.new_password" ng-keyup="compare(password)" name="repassword" ng-pattern="/^[0-9]{1,6}$/" />

发现ngModel当中的password.new_password不能实时绑定到controller中,原因为ngModel的值并没有符合pattern的规则。若符合规则,则正常绑定传递。

上一篇:AngularJS中的指令全面解析(必看)

栏    目:AngularJS

下一篇:AngularJS获取json数据的方法详解

本文标题:Angularjs之ngModel中的值验证绑定方法

本文地址:http://www.codeinn.net/misctech/70552.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有