AngularJS修改model值時,顯示內容不變的實例

來源：懂視網責編：小采時間：2020-11-27 22:07:51

AngularJS修改model值時,顯示內容不變的實例

AngularJS修改model值時,顯示內容不變的實例:一段很簡單的AngularJs代碼： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <script src=http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min

推薦度：

點擊下載本文 文檔為doc格式

導讀AngularJS修改model值時,顯示內容不變的實例:一段很簡單的AngularJs代碼： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <script src=http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min

一段很簡單的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>

網頁上回顯示一個文本框，輸入值，文本框下面會顯示所輸入的內容。

簡單修改一下代碼：

<!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>

這次當輸入內容時，不會顯示輸入信息了，同時AngularJs表達式也不能被解釋了。

感覺是因為Angular默認不存在myApp的對象，所以angular找不到對應的應用程序。

繼續修改代碼，為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>

這次執行代碼又可以更新輸入內容了。

由此可見AngularJs需要一個默認的app，當默認的app不存在的時候，需要對app編寫相應的controllar.

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com