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 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
prettier自动格式化去换行的实现代码
Aug 25 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
PHP与javascript的两种交互方式
2006/10/09 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
Java中final关键字详解
2015/08/10 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
js实现扫雷源代码
2020/11/27 Javascript
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
python实现双色球随机选号
2020/01/01 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
校运会口号
2014/06/18 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
win sever 2022如何占用操作主机角色
2022/06/25 Servers