Angularjs[2] - 数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app>
<input type="text" ng-model="name" value="">
<!--view层输出 {{angular的表达式}}-->
{{name}}
<input type="text" ng-model="name" value="">
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>
  • ng-app指令:告知 Angular 应当管理界面哪一块;
  • Angular 表达式与 js 表达式区别:

  - 属性求值:所有属性的求值是对于 scope 的,而 js 是对于 window 对象的;

  - 宽容:表达式求值,对于 undefined 和 null,Angular 是宽容的,但 js 会产生 NullPointerExceptions;

  - 没有流程控制语句:在 Angular 表达式里,不能做以下任何:条件分支,循环,抛出异常;

  - 过滤器(filters):可将表达式结果传入过滤器链(filter chains)。

时间: 2024-10-11 00:47:13

Angularjs[2] - 数据绑定的相关文章

用AngularJS实现数据绑定

用AngularJS实现数据绑定实在太方便了(DOM 操作全依赖AngularJS): <!DOCTYPE html> <html ng-app xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple app</title> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angul

AngularJS自学之路——初识AngularJS和数据绑定

AngularJS 是什么 AngularJS的官方文档是这样介绍它的.完全使用JavaScript编写的客户端技术.同其他历史悠久的Web技术(HTML.CSS和JavaScript)配合使用,使Web应用开发比以往更简单.更快捷. AngularJS主要用于构建单页面Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架. AngularJS使开发Web应用变得

AngularJS 的数据绑定

单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别 ng-bind 单向数据绑定($scope -> view),用于数据显示,简写形式是 {{}}. 1 <span ng-bind="val"></span> 两者的区别在于页面没有加载完毕 {{val}} 会直接显示到页面,直到 Angular 渲染该绑定数据(这种行为有可能将 {{val}} 让用户看到):而 ng-bind 则是在 Angular 渲染完毕后将数据显示. ng-mo

AngularJS笔记---数据绑定

一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 B.ng-models :  用于数据绑定, 也就是两个input的里面输入的信息都会绑定到val1和val2变量里面. C.{{ FiledName }}: 双括号也是用于数据的绑定. <!DOCTYPE html> <html> <script src="angul

AngularJs——双向数据绑定示例

最近在做Hybird App,接触到了AngularJs,感觉用起来蛮爽的,今天share下AngularJs的核心功能之一:双向数据绑定. 我们在页面中加入一个表单: <!DOCTYPE html> <html ng-app="userInfoModule"> <head> <meta name="content-type" content="text/html; charset=UTF-8">

关于AngularJs,数据绑定与自定义验证

最近开始着手学起了Angular,抱着好奇的心情开始研究了起来.忽然发现angular可以巧妙而方便的进行数据的绑定验证啊什么的.(当然,我只是刚开始学,所有可能有更强大的功能,只是我还没有看到) 那么先从我学习的数据绑定和数据验证开始说起吧 首先,肯定是引用 1 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 然后它需要一个模板

AngularJS入门心得2——何为双向数据绑定

前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉的.看过了大漠的视频,算是了解了AngularJS的一些优良特性.后来准备投身<AngularJS权威教程>,跟着它走,可是一来可能自己道行不够,二来,个人觉得这本书翻译的有些生硬以及一些瑕疵,比如: (1)9.2节:在指令中适用自作用域 (2)9.2节:在指令中适用自作用域 当然,以上都是一些瑕

AngularJS入门之数据绑定

本篇我们看一下AngularJS中的数据绑定.虽然我们直到这篇才提到数据绑定,但事实上在前面几篇中我们已经非常熟练的运用AngularJS的数据绑定功能了! ngBind(ng-bind)/ {{ expression }}: 1 <!DOCTYPE > 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 </head> 6 <b

AngularJS语法基础及数据绑定——详解各种数据绑定指令、属性应用

AngularJS简单易学,但是功能强大.特别是在构建单页面应用方面效果显著.而 数据绑定 可以说是他被广泛使用的最主要的优点.他舍弃了对DOM的操作方式,一切都由AngularJS来自动更新视图,我们不必写操作dom的代码.接下来我们就详细解释下AngularJS中数据绑定的方式,及其具体的使用规则.技巧. 首先介绍下此次博客的内容: 1.第一部分,介绍最最基本的AngularJS的根应用.控制器的基本语法,为初学者准备的. 2.第二部分,详解如何数据绑定,3种绑定方式的区别.分别用于什么情况