angularjs双向绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 6     <title>index</title>
 7     <link href="{$Think.const.CSSURL}bootstrap.min.css" rel="stylesheet" type="text/css"/>
 8     <script src="{$Think.const.JS}jquery.min.js" type="text/javascript"></script>
 9     <script src="{$Think.const.JS}bootstrap.min.js" type="text/javascript"></script>
10     <script src="{$Think.const.JS}angular.min.js" type="text/javascript"></script>
11     <link href="{$Think.const.CSSURL}home/index.css" rel="stylesheet" type="text/css"/>
12 </head>
13 <body ng-app="myapp" ng-controller="myctrl">
14 <div class="container">
15     <h1 class="page-header">前端技术方案</h1>
16     <form action="">
17         <div class = "from-group">
18             <label for="">请留言:</label>
19             <input type="text" class="form-control" ng-model="mess">
20         </div>
21         <div class="well">留言内容: <span ng-bind="mess"></span></div>
22     </form>
23     <img src="{$Think.const.HOMEIMG}/01.png" />
24 </div>
25 </body>
26 <script>
27     angular.module("myapp",[]).controller("myctrl",function($scope){
28         $scope.mess = "双向绑定";
29     });
30 </script>
31 </html>
时间: 2024-08-05 19:34:31

angularjs双向绑定的相关文章

AngularJS双向绑定,手动实施观察

实现这样的一个需求:页面中某个地方显示某个文本框的值经过计算得到的结果,而且是文本框值每次变化显示的计算结果也跟着动态变化. 在controller中可以声明一个对象,它的一个字段用来存储初始值: $scope.funding = {startingEstimate:0}; 以上,声明了一个funding对象,它的startingEstimate字段用来存储初始值,初始值这里是0. 在controller中还应该声明一个函数,用来把根据初始值计算得到的结果赋值给funding对象的另外一个字段.

Angularjs 双向绑定机制解析

文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其源码,将 Angular 的实现分享一下. 首先看看如何将 Model 的变更更新到 UI Angular 的 Model 是一个 Scope 的类型,每个 Scope 都归属于一个 Directive 对象,比如 $rootScope 就归属于 ng-app. 从 ng-app 往下,每个 Dir

浅谈AngularJs双向绑定

双向绑定的三个重要方法: $scope.$apply() $scope.$digest() $scope.$watch() 一.$scope.$watch() $watch作用就是在$scope上添加一个监听器,当监听的数据发生变化的时候,监听器就会收到提示,并执行某些操作.当给$watch指定如下两个函数,就可以创建一个监听器: 一个表达式,用于指定所关注的那部分数据,比如说“user.firstName”. 一个监听函数,用于在数据变更的时候接受提示. 为了实现$watch,我们需要存储监听

玩转angularJs——通过自定义ng-model,不仅仅只是input可以有双向绑定

angularJs双向绑定特性在开发中很方便很实用,但是由于ng-model一般只能挂在input上,因此我们需要自定义ng-model来在div等元素上使用该标签. 自定义指令: 1 //自定义ngModel的属性 2 .directive('contenteditable', ['$window', function() { 3 return { 4 restrict: 'A', 5 require: '?ngModel', // 此指令所代替的函数 6 link: function(sco

AngularJS学习笔记(三)数据双向绑定

双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠结其中不明白的地方,先来体验下数据绑定的效果. 数据-->视图 这里我们只演示有了数据以后,如何绑定到视图上. <!DOCTYPE html> <html ng-app="App"> <head> <script type="tex

angularjs随笔01 数据双向绑定理解 自定义过滤器 时钟更新列子

1.   数据的双向绑定可以简单的理解为,无论在文本框中输入什么,都会在数据模型中显示出来输入的内容, 双向绑定的模型和数据是进行动态绑定的,实时检查进行修改. <input type="text" ng-model="name"> {{name}} 在上述代码中,通过angular.js将数据模型对象($scope)的name属性与文本模型绑定在一起,然后就实现了在输入框输入什么都会 在文本模型中显示对应的内容,实时更新. 控制器controller,

AngularJS(2)——AngularJS数据双向绑定

双向绑定 AngularJS在$scope变量中使用脏值检测来实现了数据双向绑定. Scope作用: 1.通过数据共享连接Controller和View 2.事件的监听和响应 3.脏值检测和数据绑定 双向数据绑定最经常的应用场景就是表单了,这样当用户在前端页面完成输入后,不用任何操作,我们就已经拿到了用户的数据存放到数据模型中了.因为输入框中的ng-model和控制器中的数值实现了双向绑定,所以更改输入框的值或者更改控制器中的值,都会相应的更改双方的值.$scope对象,我们可以理解为NG框架中

深入学习AngularJS中数据的双向绑定机制

来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中,

Angular系列----AngularJS入门教程05:双向绑定(转载)

在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序. 步骤3和步骤4之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 模板 app/index.html Search: <input ng-model="query"&g