AngularJS修改model值时,显示内容不变的实例

一段很简单的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值时,显示内容不变的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS解决ng-if中的ng-model值无效的问题

    与其他指令一样,ng-if指令也会创建一个子级作用域,因此,如果在ng-if指令中添加了元素,并向元素属性增加 ng-model指令,那么ng-model指令对应的作用域属性子级作用域,而并非控制器注入的$scope作用域对象,这点在进行双向数据绑定时,需要引起注意. <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <scri

  • 浅谈Angular中ngModel的$render

    浅谈Angular中ngModel的$render

    在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode

  • AngularJS修改model值时,显示内容不变的实例

    一段很简单的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="&

  • 对angularJs中$sce服务安全显示html文本的实例

    如下所示: <div ng-app="module" ng-controller="ctrl"> {{data}} <hr> <div ng-bind-html="data"></div> <hr> <div ng-bind-html="title | trustHtml"></div> </div> <script>

  • jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

    jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1.3.4,如果运行后没有效果,自己检查easyui版本 不同版本对appendRow和mergeCells支持不一样,参数不一致什么的. 无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系. 源代码如下 $(funct

  • 快速解决angularJS中用post方法时后台拿不到值的问题

    用angularJS中的$http服务碰到了一个问题:运用$http.post方法向后台传递数据时,后台的php页面获取不到data参数传过来的值. 不论是这种姿势: $http.post( "1.php", { id: 1 }).success(function (data) { console.log(data); }); 还是这种姿势: $http({ method: 'POST', url: '1.php', data: { id: 1 } }).success(functio

  • Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能

    目录 1.本章目标 2. 如何实现 2.1 通过将左侧菜单列表改造成路由链接的形式来实现 2.2  接下来,监听跳转的路由链接,实现点击二级菜单列表时,在Main 区域展示不同的内容组件 2.3 各组件代码 1.本章目标 1.1 点击不同的菜单列表,可以在右侧 (Main) 主体区域显示不同的组件页面 2. 如何实现 2.1 通过将左侧菜单列表改造成路由链接的形式来实现 1. 首先应该为 Menu (菜单)启用 vue-router 模式 (路由模式),默认是false Menu 菜单 | El

  • js实现当鼠标移到表格上时显示这一格全部内容的代码

    想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢.想实现当鼠标移上去的时候可以显示这一行被隐藏的内容.当然这个网上有很多插件,但是我没有用,还是自己写了一个. css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 "微软雅黑"; border: 1px solid #3c8dbc; display: none;

  • 关于Springboot在新增和修改下上传图片并显示的问题

    关于Springboot在新增和修改下上传图片并显示的问题

    解决的问题: 本篇文章除了解决上传图片并显示的问题,还有就是在新增和修改下的图片上传如何处理.在这里新增和修改的页面是同一页面,修改的时候,将会把值带过去,但是由于类型为file的input标签是不能给其赋值的,那么若不改变原来图片,但是input标签中又没有值,这时怎么处理呢? 一 运行环境 开发工具:IDEA 后端:Springboot+JPA 前端:thymeleaf+semantic UI 二 代码实现 springboot中已经内嵌了上传图片的依赖包,因此不需要再添加额外依赖. 1 前

  • 谈谈AngularJs中的隐藏和显示

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). 代码如下所示: <!DOCTYPE html> <html ng-app="a2_12"> <head> <meta charset="utf-8"> <title></title> <script type=&quo

  • Python matplotlib图例放在外侧保存时显示不完整问题解决

    上次说到的,使用如下代码保存矢量图时,放在外侧的图例往往显示不完整: import numpy as np import matplotlib.pyplot as plt fig, ax = plt.subplots() x1 = np.random.uniform(-10, 10, size=20) x2 = np.random.uniform(-10, 10, size=20) #print(x1) #print(x2) number = [] x11 = [] x12 = [] for i

  • AngularJS实现DOM元素的显示与隐藏功能

    本文实例讲述了AngularJS实现DOM元素的显示与隐藏功能.分享给大家供大家参考,具体如下: DOM元素的显示与隐藏 ,是前端开发中常常会用到的功能,AngularJS中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean. [HTML代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m

随机推荐