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

發(fā)布時間：2020-10-23 08:27:53 來源：腳本之家閱讀：148 作者：lj2tj 欄目：web開發(fā)

一段很簡單的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)容時，不會顯示輸入信息了，同時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不存在的時候，需要對app編寫相應(yīng)的controllar.

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

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽