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 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
ajax异步请求详解
Jan 06 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
javascript实现评分功能
Jun 24 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 购物车的例子
2009/05/04 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Python hashlib模块用法实例分析
2018/06/12 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
DTD的含义以及作用
2014/01/26 面试题
会计毕业生自我鉴定
2013/11/04 职场文书
出生公证书样本
2014/04/04 职场文书
市场部岗位职责范本
2015/04/15 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
python前后端自定义分页器
2022/04/13 Python