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

众所周知，在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之ngModel中的值验证绑定方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS实践之使用NgModelController进行数据绑定

    AngularJS实践之使用NgModelController进行数据绑定

    前言 在Angular应用中,ng-model指令时不可缺少的一个部分,它用来将视图绑定到数据,是双向绑定魔法中重要的一环.ngModelController则是ng-model指令中所定义的controller.这个controller包含了一些用于数据绑定,验证,CSS更新,以及数值格式化和解析的服务.它不用来进行DOM渲染或者监听DOM事件.与DOM相关的逻辑都应该包含在其他的指令中,然后让这些指令来试用ngModelController中的数据绑定功能. 注意:本篇文章不是对NgMode

  • AngularJS解决ng-if中的ng-model值无效的问题

    与其他指令一样,ng-if指令也会创建一个子级作用域,因此,如果在ng-if指令中添加了元素,并向元素属性增加 ng-model指令,那么ng-model指令对应的作用域属性子级作用域,而并非控制器注入的$scope作用域对象,这点在进行双向数据绑定时,需要引起注意. <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <scri

  • AngularJS入门教程之AngularJS模型

    相关阅读: AngularJS入门教程之AngularJS表达式 AngularJS入门教程之AngularJS指令 在前面表达式和指令的教程中了解到,AngularJS模型(ng-model)可以将HTML输入域中的值与AngularJS创建的变量绑定. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.

  • 郁闷!ionic中获取ng-model绑定的值为undefined如何解决

    今天在ionic中使用ng-model时候,在对应的controller里面获得值为undefined.以前在使用angularjs的ng-model绑定时候就可以拿到的啊,这就尴尬了,决定一探究竟.大家先看下面的一个demo. 在学习angularjs的ng-model的数据双向绑定时候,我们通过以下的代码拿到对应的ng-model的值: demo1 <div ng-app="myApp" ng-controller="myCtrl"> 名字: <

  • 浅谈Angular中ngModel的$render

    浅谈Angular中ngModel的$render

    在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode

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

    众所周知,在Angular中ngModel为动态双向绑定,存在两种方式. 例如, 方式一: 在html中, <input type="text" ng-model="searchText" /> <button ng-click="check(searchText)">Check!</button> {{ searchText }} 在controller中 $scope.check = function (s

  • angular ng-model 无法获取值的处理方法

    该问题是由angular使用jq日期插件导致的无法双向绑定 <input id="dateDayStart" ng-model="dateDayStart" /> 解决方法:重新绑定 setInterval(function () { $scope.$apply(function () { $scope.params.dateDayStart = document.getElementById('dateDayStart').value; }); },

  • Angularjs的ng-repeat中去除重复数据的方法

    本文实例讲述了Angularjs的ng-repeat中去除重复数据的方法.分享给大家供大家参考,具体如下: 一.JS: ngApp.filter('unique', function () { return function (collection, keyname) { var output = [], keys = []; angular.forEach(collection, function (item) { var key = item[keyname]; if (keys.index

  • JS清除字符串中重复值的实现方法

    本文实例讲述了JS清除字符串中重复值的实现方法.分享给大家供大家参考,具体如下: /// <summary> /// 清除字符串中重复的值 /// </summary> /// <param name="Text">字符串</param> /// <param name="Label">标签(如:| ,)</param> function FilterRepeatStr(Text, Label)

  • php计算多维数组中所有值总和的方法

    本文实例讲述了php计算多维数组中所有值总和的方法.分享给大家供大家参考.具体实现方法如下: php 内置函数 array_sum() 函数返回数组中所有值的总和,只能返回一维数组的总和: 计算多维数组所有值的和就要自定义函数了: function get_sum($array) { $num = 0; foreach($array as $k => $v) { if(is_array($v)) { $num += get_sum($v); } } return $num + array_sum

  • python 返回列表中某个值的索引方法

    如下所示: list = [5,6,7,9,1,4,3,2,10] list.index(9) out:3 同时可以返回列表中最大值的索引list.index(max(list)) 最小值索引list.index(min(list)) 以上这篇python 返回列表中某个值的索引方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Pandas中inf值替换的方法

    目录 出现inf的原因 解决办法 PS:为了方便后续处理,可以利用numpy,将这些inf值进行替换. 使用Pandas从MySQL读取数据,在处理之后再写回到数据库时报了一个错误: sqlalchemy.exc.ProgrammingError: (MySQLdb._exceptions.ProgrammingError) inf can not be used with MySQL 很明确报错说明,是因为DataFrame中存在inf数据 出现inf的原因 在数据处理过程中用到了除法,并且出

  • C#程序中session值的保存方法以及转为字符串的方法总结

    C#中保存Session的三种方法及Web.Config设置 保存session到sql server;,需要指定Sql Server;服务器,这种方法因为要读写数据库最慢 <sessionState mode="SQLServer" sqlConnectionString="data source=127.0.0.1;Trusted_Connection=yes" cookieless="false" timeout="20&q

  • AngularJS ng-repeat数组有重复值的解决方法

    AngularJS ng-repeat数组有重复值的解决方法

    前言 大家都知道默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的. 如: $scope.items = [ 'red', 'blue', 'yellow', 'white', 'blue' ]; 这个数组blue就重复了,html这么遍历它 <li ng-repeat="item in items">{{ item }}</li> 控制台就会抛出一个错误: 点击错误链接到Ang

  • 利用MySQL统计一列中不同值的数量方法示例

    利用MySQL统计一列中不同值的数量方法示例

    前言 本文实现的这个需求其实十分普遍,举例来说,我们存在一个用户来源表,用来标记用户从哪个渠道注册进来.表结构如下所示- 其中 origin 是用户来源,其中的值有 iPhone .Android .Web 三种,现在需要分别统计由这三种渠道注册的用户数量. 解决方案1 SELECT count(*) FROM user_operation_log WHERE origin = 'iPhone'; SELECT count(*) FROM user_operation_log WHERE ori

随机推荐