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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 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
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
python 队列详解及实例代码
2016/10/18 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
如何写一份好的自荐信
2014/01/02 职场文书
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
市场营销计划书
2015/01/17 职场文书
行政处罚告知书
2015/07/01 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python