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获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
React中this丢失的四种解决方法
Mar 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
如何做到多笔资料的同步
2006/10/09 PHP
php ios推送(代码)
2013/07/01 PHP
php类常量用法实例分析
2015/07/09 PHP
PHP类型约束用法示例
2016/09/28 PHP
php实现微信支付之退款功能
2018/05/30 PHP
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python创建日历实例
2014/08/21 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
北承题目(C++)
2012/05/16 面试题
注塑工厂厂长岗位职责
2013/12/02 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
大学生新学期计划书
2014/04/28 职场文书
保护水资源的标语
2014/06/17 职场文书
公司周年庆活动方案
2014/08/25 职场文书
学习作风建设心得体会
2014/10/22 职场文书
考勤制度通知
2015/04/25 职场文书
重温入党誓词主持词
2015/06/29 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
python区块链实现简版工作量证明
2022/05/25 Python