AngularJS修改model值時,顯示內容不變的實例
更新時間：2018年09月13日 10:33:05 作者：lj2tj
今天小編就為大家分享一篇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.js"></script>
</head>
<body ng-app="">
<input type="text" ng-model="name"><br />
<span>{{name}}</span>
</body>
</html>
網(wǎng)頁上回顯示一個文本框，輸入值，文本框下面會顯示所輸入的內容。
簡單修改一下代碼：
<!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找不到對應的應用程序。
繼續(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í)行代碼又可以更新輸入內容了。
由此可見AngularJs需要一個默認的app，當默認的app不存在的時候，需要對app編寫相應的controllar.
以上這篇AngularJS修改model值時,顯示內容不變的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
angularJs中$scope數(shù)據(jù)序列化的實例
今天小編就為大家分享一篇angularJs中$scope數(shù)據(jù)序列化的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文通過示例向大家介紹了AngularJS語法的使用，小伙伴們認真研讀下吧，非常的實用哦。2015-01-01
這篇文章主要介紹了angularJS 中$scope方法使用指南,需要的朋友可以參考下2015-02-02
Angular 4.x中表單Reactive Forms詳解
這篇文章主要介紹了Angular 4.x中表單Reactive Forms的相關資料，文中通過示例代碼介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要介紹了AngularJS手動表單驗證的相關資料，AngularJS的表單驗證大致有兩種，一種是手動驗證，一種是自動驗證，本文重點介紹AngularJS自動表單驗證，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了Angular value與ngValue區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
本文主要介紹 AngularJS SQL,這里給大家整理了相關資料，并提供了實例代碼,有需要的小伙伴可以參考下2016-07-07
Angular應用tsconfig.json中的lib屬性示例解析
這篇文章主要介紹了Angular應用tsconfig.json中的lib屬性示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
這篇文章主要為大家詳細介紹了Angularjs中的依賴注入，AngularJS提供了一個至高無上的依賴注入機制，感興趣的小伙伴們可以參考一下2016-03-03
本文給大家分享Angularjs cookie 操作實例詳解，demo案例分析，感興趣的朋友參考下吧2017-09-09