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的Select选择框的华丽变身
Aug 23 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 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下使用无限生命期Session的方法
2007/03/16 PHP
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
PHP编写RESTful接口
2016/02/23 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
项目实践之javascript技巧
2007/12/06 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
python设计模式大全
2016/06/27 Python
Python实现针对中文排序的方法
2017/05/09 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
使用Python进行目录的对比方法
2018/11/01 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
分层教学实施方案
2014/03/19 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL