快捷導(dǎo)航

AngularJS修改model值時(shí),顯示內(nèi)容不變的實(shí)例

更新時(shí)間：2018年09月13日 10:33:05 作者：lj2tj

今天小編就為大家分享一篇AngularJS修改model值時(shí),顯示內(nèi)容不變的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

一段很簡單的AngularJs代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="">
 
 <input type="text" ng-model="name"><br />
 <span>{{name}}</span>
 
</body>
</html>

網(wǎng)頁上回顯示一個文本框，輸入值，文本框下面會顯示所輸入的內(nèi)容。

簡單修改一下代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">
 
 <input type="text" ng-model="name"><br />
 <span>{{name}}</span>
 
</body>
</html>

這次當(dāng)輸入內(nèi)容時(shí)，不會顯示輸入信息了，同時(shí)AngularJs表達(dá)式也不能被解釋了。

感覺是因?yàn)锳ngular默認(rèn)不存在myApp的對象，所以angular找不到對應(yīng)的應(yīng)用程序。

繼續(xù)修改代碼，為myApp重寫controllar：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl">
 
 <input type="text" ng-model="name"><br />
 <span>{{name}}</span>
 
 <script>
 var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope) {
 $scope.name = "John Doe";
 });
 </script>
</body>
</html>

這次執(zhí)行代碼又可以更新輸入內(nèi)容了。

由此可見AngularJs需要一個默認(rèn)的app，當(dāng)默認(rèn)的app不存在的時(shí)候，需要對app編寫相應(yīng)的controllar.

以上這篇AngularJS修改model值時(shí),顯示內(nèi)容不變的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解AngularJS通過ocLazyLoad實(shí)現(xiàn)動態(tài)（懶）加載模塊和依賴
本篇文章主要介紹了詳解AngularJS通過ocLazyLoad實(shí)現(xiàn)動態(tài)（懶）加載模塊和依賴，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03
在 Angular2 中實(shí)現(xiàn)自定義校驗(yàn)指令（確認(rèn)密碼）的方法
這篇文章給大家探索 Angular 2 內(nèi)建的自定義驗(yàn)證，非常不錯，具有參考借鑒價(jià)值，需要的朋友參考下
2017-01-01
Angular實(shí)現(xiàn)form自動布局
這篇文章主要介紹了Angular實(shí)現(xiàn)form自動布局的相關(guān)資料，以代碼片段的形式分析了Angular實(shí)現(xiàn)form自動布局的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下
2016-01-01
詳解AngularJS驗(yàn)證、過濾器、指令
這篇文章主要介紹了AngularJS驗(yàn)證、過濾器、指令的相關(guān)知識,angularJS中提供了許多的驗(yàn)證指令，可以輕松的實(shí)現(xiàn)驗(yàn)證，具體詳情大家通過本文一起學(xué)習(xí)吧，需要的朋友可以參考下
2017-01-01
將Angular單項(xiàng)目升級為多項(xiàng)目的全過程
有時(shí)候在開發(fā)的過程中發(fā)現(xiàn)一個Angular項(xiàng)目不太夠用,兩個獨(dú)立的項(xiàng)目又不太好復(fù)用,這時(shí)便需要將原來的Angular項(xiàng)目簡單做個升級,這篇文章主要給大家介紹了關(guān)于將Angular單項(xiàng)目升級為多項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
2021-11-11
Angular.js中處理頁面閃爍的方法詳解
我們在應(yīng)用的頁面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁面都需要消耗一定的時(shí)間。這里的間隔可能很小，甚至讓人感覺不到區(qū)別；但也可能很長，這樣會導(dǎo)致讓我們的用戶看到了沒有被渲染過的頁面。本文將介紹Angular.js中處理頁面閃爍的方法。
2017-03-03
ng-zorro-antd 入門初體驗(yàn)
這篇文章主要介紹了ng-zorro-antd 入門初體驗(yàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
Angular5升級RxJS到5.5.3報(bào)錯：EmptyError: no elements in sequence的解
這篇文章主要給大家介紹了關(guān)于Angular5升級RxJS到5.5.3報(bào)錯：EmptyError: no elements in sequence的解決方法，文中介紹了兩個解決方法，大家可以選擇使用，需要的朋友可以參考借鑒，下面來一起看看吧。
2018-04-04
AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法
這篇文章主要介紹了AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了AngularJS自定義指令實(shí)現(xiàn)復(fù)制功能的相關(guān)操作技巧,需要的朋友可以參考下
2017-05-05
Angular.Js之Scope作用域的學(xué)習(xí)教程
這篇文章主要給大家分享了關(guān)于Angular.Js之Scope作用域的學(xué)習(xí)教程 ,文中通過多個示例代碼介紹的非常詳細(xì)，相信對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-04-04