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 相关文章推荐
javascript 获取函数形参个数
Jul 31 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
jquery拖动改变div大小
Jul 04 jQuery
js实现单张图片平移切换效果
Oct 11 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
JS图片预加载三种实现方法解析
May 08 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+Ajax实现验证码的实时验证
2016/07/20 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
jQuery中:radio选择器用法实例
2015/01/03 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
Python Queue模块详细介绍及实例
2016/12/27 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Django框架视图介绍与使用详解
2019/07/18 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
Python类如何定义私有变量
2020/02/03 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
优秀团队获奖感言
2014/02/19 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
室内趣味活动方案
2014/08/24 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
导游词之阆中古城
2019/12/23 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL