Angularjs之ngModel中的值验证绑定

ゝ一纸荒年。 2022-08-22 03:51 163阅读 0赞

**众所周知，在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的规则。若符合规则，则正常绑定传递。

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关【angularjs】数据绑定

文章目录基础：数据绑定：总结：因为公司的需要，开始学习angularjs。准备： webform开发工具。 anguljs

忘是亡心i/ 2024年02月19日 16:10/ 0 赞/ 82 阅读

相关 AngularJs 页面数据绑定设置默认值

在AngularJS中，对页面进行数据绑定，有两种方法： 1、表达式：`{ {param}}` 2、`ng-bind: ng-bind="param"` 1、遇到的问

￡神魔★判官ぃ/ 2023年06月25日 02:19/ 0 赞/ 19 阅读

相关 AngularJS入门-数据绑定

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据

喜欢ヅ旅行/ 2022年09月24日 07:24/ 0 赞/ 226 阅读

相关 Angularjs之ngModel中的值验证绑定

众所周知，在Angular中ngModel为动态双向绑定，存在两种方式。例如，方式一：在html中， <input type="text" ng-m

ゝ一纸荒年。/ 2022年08月22日 03:51/ 0 赞/ 164 阅读

相关 AngularJS（2）——AngularJS数据双向绑定

双向绑定 AngularJS在$scope变量中使用脏值检测来实现了数据双向绑定。 Scope作用： 1.通过数据共享连接Controller和View

妖狐艹你老母/ 2022年08月22日 00:18/ 0 赞/ 197 阅读

相关 AngularJs数据绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

朴灿烈づ我的快乐病毒、/ 2022年07月12日 07:09/ 0 赞/ 198 阅读

相关 angular2中ngModel绑定问题

强烈推荐一个大神的人工智能的教程：[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhang

落日映苍穹つ/ 2022年06月11日 04:47/ 0 赞/ 184 阅读

相关 angular2中ngModel绑定问题

强烈推荐一个大神的人工智能的教程：[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhang

待我称王封你为后i/ 2022年06月11日 04:47/ 0 赞/ 222 阅读

相关 Firebase 的 AngularJS 绑定 AngularFire

AngularFire 详细介绍 AngularFire 是 [Firebase][] 官方支持 AngularJS 绑定 Firebase。Firebase 是全后端，不需

古城微笑少年丶/ 2022年05月19日 07:22/ 0 赞/ 187 阅读

相关 angularJS(三)angularJsDemo之双向绑定

需求：文本框输入什么后面显示什么 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

红太狼/ 2022年02月23日 00:28/ 0 赞/ 273 阅读