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 相关文章推荐
JS实现可改变列宽的table实例
Jul 02 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
node+vue实现文件上传功能
May 28 Javascript
详解vue组件之间的通信
Aug 30 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使之能同时支持GIF和JPEG
2006/10/09 PHP
新闻分类录入、显示系统
2006/10/09 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
往来会计岗位职责
2013/12/19 职场文书
公司经理聘任书
2014/03/29 职场文书
欢迎标语大全
2014/06/21 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
岗位聘任报告
2015/03/02 职场文书
乒乓球比赛通知
2015/04/27 职场文书
2015年售票员工作总结
2015/04/29 职场文书