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 FormatNumber函数实现方法
Dec 30 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 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初学者头疼十四条问题大总结
2008/11/12 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
python打开使用的方法
2019/09/30 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
详解python with 上下文管理器
2020/09/02 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
个人简历自我鉴定
2013/10/11 职场文书
保护环境的标语
2014/06/09 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android