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中的值驗證繫結
眾所周知,在Angular中ngModel為動態雙向繫結,存在兩種方式。 例如, 方式一: 在html中, <input type="text" ng-model="searchText" /> <button ng-click="ch
angularJS之ngModel繫結日期型別出現錯誤Angular error:datefmt的解決辦法
<input type="date" ng-model="dateQry"> $scope.dateQry = "2014-12-24"; 在angular中故意將input
td中通過button繫結click事件實現跳轉,以及獲取同一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-ui中select元件繫結值改變,觸發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
深入理解JavaScript之this的四種繫結
之前對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.0中v-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(