1. 程式人生 > >Angularjs之ngModel中的值驗證繫結

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的規則。若符合規則,則正常繫結傳遞。

相關推薦

AngularjsngModel驗證

眾所周知,在Angular中ngModel為動態雙向繫結,存在兩種方式。 例如, 方式一: 在html中, <input type="text" ng-model="searchText" /> <button ng-click="ch

angularJSngModel日期型別出現錯誤Angular error:datefmt的解決辦法

<input type="date" ng-model="dateQry"> $scope.dateQry = "2014-12-24"; 在angular中故意將input

td通過buttonclick事件實現跳轉,以及獲取同一table另一td的

1、通過button繫結事件跳轉到同一頁面的其他div 例: js頁面 <table id = "tableid"> <tr> <td id = "rcode">"123456"</td> <td><butto

net MVC的模型驗證以及ModelState

模型繫結 模型繫結應該很容易理解,就是傳遞過來的資料,建立對應的model並把資料賦予model的屬性,這樣model的欄位就有值了。 比如要建立使用者,在form表單中填寫使用者名稱密碼,在controller中直接使用User類接收就行了: publi

angularjs的雙向原理解析

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

AngularJS使用$.ajax失敗的處理方法

使用AngularJS中的$http服務來獲取資料的時候就在想,如果使用jQuery的封裝的ajax方法來獲取資料是否可行。 第一次的時候是按照如下樣子寫的: angular.module('myApp',[]).controller('myController',func

AngularJS學習筆記directive——scope選項與策略

開門見山地說,scope:{}使指令與外界隔離開來,使其模板(template)處於non-inheriting(無繼承)的狀態,當然除非你在其中使用了transclude嵌入,這點之後的筆記會再詳細記錄的。但是這顯然不符合實際開發中的需求,因為實際上,我們經常想要我們的

qml的屬性與賦

淺談qml屬性繫結與賦值 屬性賦值 就字面意思,賦一個值給屬性 Rectangle { id:rect Component.onCompeleted:{ rect.width = 10; // 賦值 re

在repeater的ItemDataBound事件獲得要的欄位的

<td bgcolor="#ffffcc" align="center"><asp:Label ID="lbl_Id" Visible=false Text='<%# DataBinder.Eval(Container.DataItem,"abusid

element-uiselect元件改變,觸發change事件

1.安裝vuecli腳手架 2.終端輸入 cnpm i element-ui -S 安裝element-ui 3.按需引入select元件 在main.js中寫入如下程式碼 /* 匯入第三方庫開始 */ import 'element-ui/

c++多型性(動態)

多型性 指相同物件收到不同訊息或不同物件收到相同訊息時產生不同的實現動作。C++支援兩種多型性:編譯時多型性,執行時多型性。   a、編譯時多型性:通過過載函式實現    b、執行時多型性:通過虛擬函式實現  多型性可以簡單地概括為“一

Vue表單控制元件

1.text <p>text輸入文字</p> <span>Hello {{name}}</span> <input type="text" v-model="name" placeholder="yous name" name

深入理解JavaScriptthis的四種

  之前對this的四種繫結不太理解,好在瀏覽了https://www.cnblogs.com/xiaohuochai/p/5735901.html這篇博文,才得以清晰思路,接下來我再次總結this的四種繫結機制。 1  this的四種繫結機制   在JavaS

vue起步三v-bind資料

設定一個數據為website的值為http://www.baidu.com 在html中我們進行繫結通過v-bind:屬性名=“鍵名” 如:<a v-bind:href="website">web開發</a> 注意:這裡的website沒有兩個大括號

Android 四大元件Service的啟動、小述

一、概述 學習過Android的小夥伴就不可能不知道Service是什麼,因為Service是Android四大元件之一,聲名赫赫有木有,所以在這裡我就不詳細介紹了,本節主要還是充當筆記的作用,因為我待記性如初戀,記性虐我千百遍。 二、Service的建立 Service是一

AngularJS$resource的params

場景 在需要檢索使用者列表時,使用params在get請求中新增檢索資訊。 UserService angular .module('user') .factory('UserService', UserService); UserService

vue父子元件事件

父子元件繫結事件: 注意:父元件是自定義事件,由子元件傳遞觸發事件資訊;子元件是系統事件比如:click等 <div id="app"> <counter @handle="fatherEvent"></counter>

vue2.0v-on自定義事件

vue中父元件通過prop傳遞資料給子元件,而想要將子元件的資料傳遞給父元件,則可以通過自定義事件的繫結。 每個 Vue 例項都實現了事件介面,即: 使用 $on(eventName) 監聽事件 使用 $emit(eventName) 觸發事

Python3的命名、解析與函式閉包

介紹 本篇主要介紹Python中的命名解析與函式閉包,關於類或物件的命名解析是關於屬性,在另一篇中有詳細介紹:Python3描述器 Python中的名字(name) Python中的名字不等同於其他語言中的變數,當進行賦值操作時,name1 = xxx,是給物件xxx賦予了名字n

Java的靜態與動態事例

在這個例子中使用Java面向物件中的多型來簡單介紹靜態繫結和動態繫結的區別。 /* * 建立一個Father類。 * 為了方便獲取,成員變數a設定為public的。 * */ class Father{ public int a = 10; public void saying(