AngularJS修改model值时,显示内容不变的实例


Posted in Javascript onSeptember 13, 2018

一段很简单的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值时,显示内容不变的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的闭包原理分析
Mar 08 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
angular.bind使用心得
Oct 26 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 #Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 #Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 #Javascript
vue interceptor 使用教程实例详解
Sep 13 #Javascript
Vue点击切换颜色的方法
Sep 13 #Javascript
node中的cookie的具体使用
Sep 13 #Javascript
vue动态改变背景图片demo分享
Sep 13 #Javascript
You might like
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
js验证账户名是否重复
2020/05/26 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python简单进程锁代码实例
2015/04/27 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
《湘夫人》教学反思
2014/02/21 职场文书
银行先进个人总结
2015/02/15 职场文书
工作简报格式范文
2015/07/21 职场文书
2016年情人节广告语
2016/01/28 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
详解redis在微服务领域的贡献
2021/10/16 Redis