1. 程式人生 > >angularjs WdatePicker ng-model問題解決

angularjs WdatePicker ng-model問題解決

假設我們在專案中需要用到WdatePicker以及angularjs,並有如下的程式碼:

<div>
			<div class="h4">ddd</div>
			<input class="form-control" type="text" ng-model="text.ddd"
				readonly="readonly" 
				onClick="WdatePicker({dateFmt:'yyyy',lang:'zh-cn'})"
				style="width: 400px; cursor: pointer;" />
		</div>

這樣的程式碼,問題就在於,當你需要進行提交的時候,你會發現$scope.text.ddd是沒有值的。解決方案是加一個onChange="",程式碼變為如下:
<div>
			<div class="h4">ddd{{text.bbb}}</div>
			<input class="form-control" type="text" ng-model="text.ddd"
				readonly="readonly" onChange=""
				onClick="WdatePicker({dateFmt:'yyyy',lang:'zh-cn'})"
				style="width: 400px; cursor: pointer;" />
		</div>

是的,只要加入這個就可以了。當然,你可能會注意到還有一些變動的是,ddd{{text.bbb}},我之所以這樣寫是為了解決一個疑惑的。這個疑惑就是,你加上onChange=""之後,哪怕你選擇了日期,但是{{text.bbb}}也是取不出值來的,而且你輸出一下$scope.text.ddd也還是undefined的,這個時候你可能會以為onChange=""無效。但是,其實不是這樣的,當你提交資料時,你會發現它的確是被提交了的。

相關推薦

angularjs WdatePicker ng-model問題解決

假設我們在專案中需要用到WdatePicker以及angularjs,並有如下的程式碼: <div> <div class="h4">ddd</div> <input class="form-control" type=

AngularJSng-model通過$watch動態取值

blog html lib brush google java logs con head 這個例子的意思是,當xxxx的長度不超過6時,xxxx和yyyy兩個input的model是無關的,但當xxxx超過6,則yyyy會跟隨其值而變化。 <!doctype

AngularJS ng-model獲取不到WdatePicker值的解決方案

refs: 1)加一個onChange="" 2)在directive中實現 使用AngularJS directive指令,通過onpicked(選中後觸發)和oncleared(點選清除按鈕觸發)兩個回撥函式來觸發元素的change事件,AngularJ

angularjs select標籤使用ng-repeat標籤之後,ng-model無法更新問題解決

    angularjs select標籤使用ng-repeat標籤之後,ng-model無法更新問題,百度了一下沒有發現原因,後來採用了jquery的方式進行首次賦值,如下過程: 我也遇到過這樣

AngularJS學習之ng-if巢狀ng-model變數衝突解決

ng-if與ng-model聯合使用,ng-if會建立自己的作用域,直接使用 字串 作為ng-model的變數,父作用域獲取不到。 <div ng-if="showValidateCode"

玩轉angularJs——通過自定義ng-model,不僅僅只是input可以有雙向綁定

spa ase write blur when mob ron lin for angularJs雙向綁定特性在開發中很方便很實用,但是由於ng-model一般只能掛在input上,因此我們需要自定義ng-model來在div等元素上使用該標簽。 自定義指令: 1

angularjs-ng-cloak 解決閃屏問題

angularjs ng-cloak # 使用ng-cloak 及樣式.ng-cloak <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title&

angularjs-數據同步時機ng-model-options

angularjs#ng-model-options數據同步時機 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <scri

AngularJS 獲取ng-repeat的動態ng-model

con $scope 對象 文件 spec input ram ng-repeat ng-model 首先ng-model設置為$parent.conf[$index]: 用$parent的原因是ng-repeat產生的,他會為每一個input生成一個子scope對象,而

angularjs ng-if 中的ng-model 值作用域問題

現象:最近做了一個需求,頁面上使用了ng-if 條件做判斷,導致通過使用 $scope 獲取不到 ng-model 的值。 問題原因: ng-if這個指令單獨開了一個作用域,它只可以繼承,不可以進行往外傳值。   解決辦法: 這個問題就是一個作用域的問題。使用 ng-if ,需要在傳值的地

js賦值給angularjs ng-model 資料的千分位格式

<div ng-controller="myController"> <input type="text" onblur="thousands(this)" onfocus="focusSelect(this)" ng-model="myValue"> </

angularjs ng-model-option

angular-1.3 之ng-model-options指令 ng-model-options是angular-1.3新出的一個指令,這篇文章就來介紹這個指令的用法.   ng-model-options允許我們控制ng-mod

AngularJs ng-repeat解決迴圈物件出現重複項報錯的問題

問題:ng-repeat  的迴圈物件是不能出現重複項的,所以如果有重複的就會報錯,應該是 key value的問題吧,不是很瞭解內部執行機制;經過查詢發現 在 迴圈後面加上  track by $index 就會解決問題,也就可以有重複物件了 報錯:   劃

AngularJsng-repeat中動態使用ng-model進行雙向資料繫結

首先說明一下功能需求: 當點選一次增加按鈕的時候,下方就會多一行輸入框; 當點選一次刪除按鈕的時候,所點選的刪除按鈕那行的輸入框會消失; 當點選列印資訊按鈕的時候,把所有輸入框中的資料讀取出來,並列印到控制檯上。 由此可看出,帶有刪除按鈕的這部分DIV是動態的。

AngularJS 資料繫結,雙向繫結(ng-model)

資料雙向繫結:檢視上的資料通過表單元素繫結到Model模型($scope)上。 (使用者只能通過表單元素輸入資料)demo.html:<!DOCTYPE html> <html lang="en"> <head> <meta cha

angularJS控制器ng-controller裡獲取不到input標籤裡ng-model的值

所遇問題: html:ng-model="searchKey" <div id="app-list" class="hidden" ng-controller="IndexController"> <section class="media c

angularJs裡單選框radio怎麼使用ng-model

使用ng-model和ng-value ng-mode是當前選中的值,, ng-value是這個radio的值。 使用ng-model把radio綁到一個變數上,ng-value使用表示式來表示值。選中時它的值就是ng-value的值了。測試程式碼如

AngularJS中獲取ng-repeat動態生成的ng-model

請關注我的微信公眾號 程式碼 html <div> <div class="modal-header"> <h3 class

解決AngularJS使用ng-bind-html會過濾html中style屬性的問題

要輸出一個包含html格式效果的文字就是字串 眾所周知,就是要通過ng-bind-html來進行資料繫結 <small class="block m-t-sm img-full" data-ng-bind-html="vm.contentdetial.content"

解決AngularJSng-repeat不更新檢視的問題

最近寫AngularJS專案中,遇到一個問題,先對陣列進行賦值,ng--repeat正常工作,然後對陣列進行修改,ng-repeat似乎沒有工作,檢視沒有更新。 原因是ng-repeat會已預設值排序,由於我的陣列中的元素有重複,所以ng-repeat沒有對重複的元素進行