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