AngularJS基礎(chǔ) ng-model 指令詳解及示例代碼
AngularJS ng-model 指令
AngularJS 實例
綁定輸入框的值到 scope 變量中:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <p>input 輸入框的值綁定了變量 "name" :</p> {{name}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); </script> <p>該實例演示了如何使用 ng-model 指令綁定輸入框的值到 scope 變量中。</p> </body> </html>
定義和用法
ng-model 指令綁定了 HTML 表單元素到 scope 變量中。
如果 scope 中不存在變量, 將會創(chuàng)建它。
語法
<element ng-model="name"></element>
<input>, <select>, <textarea>, 元素支持該指令。
參數(shù)值
值 | 描述 |
---|---|
separator | 你想要綁定到表單域的屬性名。 |
以上就是對AngularJS ng-model資料的整理,后續(xù)繼續(xù)補充相關(guān)資料。
相關(guān)文章
AngularJS基于http請求實現(xiàn)下載php生成的excel文件功能示例
這篇文章主要介紹了AngularJS基于http請求實現(xiàn)下載php生成的excel文件功能,結(jié)合實例形式分析了AngularJS http請求及文件下載等相關(guān)操作技巧,需要的朋友可以參考下2018-01-01解決angularjs WdatePicker ng-model的問題
今天小編就為大家分享一篇解決angularjs WdatePicker ng-model的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09AngularJS+Node.js實現(xiàn)在線聊天室
隨著互聯(lián)網(wǎng)和信息技術(shù)的發(fā)展,如何快速構(gòu)建高效、強大的動態(tài)網(wǎng)站成為很多人研究的熱點。該文將結(jié)合AngularJS和Node.js構(gòu)建一個在線聊天室,體現(xiàn)AngularJs和Node.js整合的優(yōu)點。2015-08-08Angular.js中定時器循環(huán)的3種方法總結(jié)
這篇文章主要給大家總結(jié)了angular.js中定時器循環(huán)的3種方法,分別是利用$interlval實現(xiàn)、$timeout的遞歸調(diào)用來實現(xiàn)以及$timeout借助arguments.callee來實現(xiàn),每種方法都給出了詳細的示例艾瑪供大家學(xué)習(xí)參考,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-04-04基于angular實現(xiàn)模擬微信小程序swiper組件
這篇文章主要介紹了基于angular實現(xiàn)模擬微信小程序swiper組件 ,需要的朋友可以參考下2017-06-06Angular中實現(xiàn)樹形結(jié)構(gòu)視圖實例代碼
近兩年當(dāng)中使用Angular開發(fā)過很多項目,其中也涉及到一些樹形結(jié)構(gòu)視圖的顯示,最近的在項目中封裝了大量的組件,一些組件也有樹形結(jié)構(gòu)的展示,所以寫出來總結(jié)一下。2017-05-05