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时间下拉框小例子
Apr 15 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
jquery图片切换实例分析
Apr 15 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
JS变量及其作用域
Mar 29 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
vue登录注册实例详解
Sep 14 Javascript
js+canvas实现画板功能
Sep 13 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
在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
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
利用javascript中的call实现继承
2007/01/22 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
python实现五子棋小游戏
2020/03/25 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
安全生产投入制度
2014/01/29 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
优秀班主任材料
2014/12/16 职场文书
交通事故和解协议书
2015/01/27 职场文书
大二学年个人总结
2015/03/03 职场文书
护士业务学习心得体会
2016/01/25 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis