快捷導(dǎo)航

AngularJS基礎(chǔ) ng-model 指令詳解及示例代碼

更新時(shí)間：2016年08月02日 10:17:29 投稿：lqh

本文主要介紹AngularJS ng-model 指令,這里幫大家整理了ng-model的基本資料,并附有示例代碼,有需要的小伙伴可以參考下

AngularJS ng-model 指令

AngularJS 實(shí)例

綁定輸入框的值到 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>該實(shí)例演示了如何使用 ng-model 指令綁定輸入框的值到 scope 變量中。</p>

</body>
</html>

定義和用法

ng-model 指令綁定了 HTML 表單元素到 scope 變量中。

如果 scope 中不存在變量, 將會(huì)創(chuàng)建它。

語法

<input>, <select>, <textarea>, 元素支持該指令。

參數(shù)值

值	描述
separator	你想要綁定到表單域的屬性名。

以上就是對(duì)AngularJS ng-model資料的整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料。

您可能感興趣的文章:

相關(guān)文章

angularjs 源碼解析之injector
這篇文章主要介紹angular中實(shí)現(xiàn)依賴注入的”幕后英雄” — 注入器(Injector)。說它是”幕后英雄”，是因?yàn)樗攀且蕾囎⑷氲靡詫?shí)現(xiàn)的主力。我們從源碼上來分析下他吧
2016-08-08
Angular.js中angular-ui-router的簡(jiǎn)單實(shí)踐
本篇文章主要介紹了Angular.js中angular-ui-router的簡(jiǎn)單實(shí)踐，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
AngualrJs清除定時(shí)器遇到的坑
這篇文章主要介紹了AngualrJs清除定時(shí)器遇到的坑,需要的朋友可以參考下
2017-10-10
AngularJS安裝版本問題解析
這篇文章主要介紹了AngularJS安裝版本問題解析,在這需要注意在安裝前請(qǐng)確保自己安裝NodeJS環(huán)境版本為V18及以上，否則會(huì)因node版本問題導(dǎo)致項(xiàng)目無法正常運(yùn)行，需要的朋友可以參考下
2024-02-02
教你用AngularJS框架一行JS代碼實(shí)現(xiàn)控件驗(yàn)證效果
簡(jiǎn)單來說Angular.js是google開發(fā)者設(shè)計(jì)和開發(fā)的一套前端開發(fā)框架，幫助你簡(jiǎn)化前端開發(fā)的負(fù)擔(dān)。到底能簡(jiǎn)化到什么程度呢，今天我們來看下，一行代碼實(shí)現(xiàn)控件驗(yàn)證效果，有木有嚇尿？
2014-06-06
angular中子控制器向父控制器傳值的實(shí)例
今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
詳解angular如何調(diào)用HTML字符串的方法
這篇文章主要介紹了詳解angular如何調(diào)用HTML字符串的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
Angularjs Promise實(shí)例詳解
Promise是一個(gè)構(gòu)造函數(shù)，自己身上有all、reject、resolve這幾個(gè)異步方式處理值的方法，原型上有then、catch等同樣很眼熟的方法，下面通過實(shí)例代碼給大家講解angularjs promise 的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2018-03-03
AngularJS中$interval的用法詳解
在AngularJS中$interval用來處理間歇性處理一些事情,接下來通過本文給大家介紹AngularJS中$interval的用法，需要的朋友參考下
2016-02-02
Angularjs中使用layDate日期控件示例
本篇文章主要介紹了Angularjs中使用layDate日期控件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-01-01