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 调整select 位置的函数
Feb 21 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 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
php下统计用户在线时间的一种尝试
2010/08/26 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
php分页示例分享
2014/04/30 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
angular4自定义组件详解
2017/09/28 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
python实现支付宝转账接口
2019/05/07 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
数据库连接池的工作原理
2012/09/26 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
会计学应届毕业生推荐信
2013/11/04 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
小小商店教学反思
2014/04/27 职场文书
校长创先争优承诺书
2014/08/30 职场文书
小学生学习保证书
2015/02/26 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL