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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 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读取和编写XML DOM的实现代码
2011/02/03 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php常用文件操作函数汇总
2014/11/22 PHP
PHP时间和日期函数详解
2015/05/08 PHP
PHP中header用法小结
2016/05/23 PHP
php-app开发接口加密详解
2018/04/18 PHP
用js传递value默认值的示例代码
2014/09/11 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python编写弹球游戏的实现代码
2018/03/12 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python自动生成sql语句的脚本
2021/02/24 Python
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
劳资员岗位职责
2013/11/11 职场文书
业务总经理岗位职责
2014/02/03 职场文书
运动会领导邀请函
2014/02/05 职场文书
便利店投资创业计划书
2014/02/08 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
求职教师自荐书
2014/06/19 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
出国留学英文自荐信
2015/03/25 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
python基础之while循环语句的使用
2021/04/20 Python
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Python pandas之求和运算和非空值个数统计
2021/08/07 Python