第4章 数据绑定

  • AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）展示到视图（View）中。
  • 所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联，分为单向绑定和双向绑定两种方式。

4.1 单向绑定

  • 单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到DOM中显示，如之前所学的artTemplate 模板引擎的工作方式。
  • 只能模型（Model）数据向视图（View）传递

4.2 双向绑定

  • 双向绑定则可以实现模型（Model）数据和视图（View）模板的双向传递。

4.3 相关指令

  • 在AngularJS中通过“{{}}”和ng-bind指令来实现模型（Model）数据向视图模板（View）的绑定，模型数据通过一个内置服务$scope来提供，这个$scope是一个空对象，通过为这个对象添加属性或者方法便可以在相应的视图（View）模板里被访问。

  • 注：“{{}}”是ng-bind的简写形式，其区别在于通过“{{}}”绑定数据时会有“闪烁”现象，添加ng-cloak也可以解决“闪烁”现象，通过ng-bind-template可以绑定多个数据。

  • 示例1：

<body ng-app="App">

    <ul ng-controller="DemoController">

        <li ng-bind="name"></li>

        <li ng-cloak>{{name}}{{age}}</li>

        <li ng-bind-template="{{name}}{{age}}" ng-bind-template="string"></li>

    </ul>

    <script src="./libs/angular.min.js"></script>

    <script>

        var App = angular.module('App', []);

        App.controller('DemoController', ['$scope', function ($scope) {

            // $scope 就是Model

            $scope.name = 'itcast';

            $scope.age = 10;

        }]);

    </script>

</body>
  • 通过为表单元素添加ng-model指令实现视图（View）模板向模型（Model）数据的绑定。
  • 要实现数据从视图向模型绑定，需要借助于表单元素，并且只能是表单元素

初始化

  • 通过ng-init可以初始化模型（Model）也就是$scope。
  • 示例：ng-init="name='zs';age=10"

为DOM元素添加事件

  • AngularJS对事件也进行了扩展，无需显式的获取DOM元素便可以添加事件，易用性变的更强。通过在原有事件名称基础上添加ng-做为前缀，然后以属性的形式添加到相应的HTML标签上即可。如ng-click、ng-dblclick、ng-blur等。

数据筛选

  • 通过ng-repeat可以将数组或对象数据迭代到视图模板中，ng-switch、on、ng-switch-when可以对数据进行筛选。

AngularJS——第4章 数据绑定的更多相关文章

  1. AngularJS——第1章 简介

    第1章 简介 由谷歌公司开发维护的前端MVC框架,克服了HTML在构建应用上的诸多不足,降低了开发成本,提高了效率. 一个框架 以数据和逻辑作为驱动 AngularJS核心特性:模块化,双数据绑定,语 ...

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

    AngularJS简单易学,但是功能强大.特别是在构建单页面应用方面效果显著.而 数据绑定 可以说是他被广泛使用的最主要的优点.他舍弃了对DOM的操作方式,一切都由AngularJS来自动更新视图,我 ...

  3. Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用

    本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...

  4. angularjs探秘<四> 双向数据绑定

    双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...

  5. AngularJS——第11章 其它

    第11章 其它 11.1jQuery 在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite,通过angular.element不能选择元素,但可以将一个DOM元素转成jQ ...

  6. AngularJS——第9章 模块加载

    第9章 模块加载 AngularJS模块可以在被加载和执行之前对其自身进行配置.我们可以在应用的加载阶段配置不同的逻辑. [AngularJS执行流程] 启动阶段(startup) 开始 --> ...

  7. AngularJS——第8章 服务

    第8章 服务 服务是一个对象或函数,对外提供特定的功能. 8.1 内建服务 1. $location是对原生Javascript中location对象属性和方法的封装. // $location内置服 ...

  8. AngularJS——第7章 依赖注入

    第7章 依赖注入 AngularJS采用模块化的方式组织代码,将一些通用逻辑封装成一个对象或函数,实现最大程度的复用,这导致了使用者和被使用者之间存在依赖关系. 所谓依赖注入是指在运行时自动查找依赖关 ...

  9. AngularJS——第6章 作用域

    第6章 作用域 在AngularJS中使用过滤器格式化展示数据,在"{{}}"中使用"|"来调用过滤器,使用":"传递参数. 6.1 内置过 ...

随机推荐

  1. php 分页实现 和 php 大文件上传失败的处理方式

    1. php分页: 要想做php的分页,首先要弄清楚要什么样的分页,关系到哪些参数,参数之间怎么关联: 目标分页效果如下: 分析: 1.主要涉及两个参数:一个是当前输出页面的页码,用变量$p 表示,另 ...

  2. 服务发现 - consul 的介绍、部署和使用(转)

    什么是服务发现 相关源码: spring cloud demo 微服务的框架体系中,服务发现是不能不提的一个模块.我相信了解或者熟悉微服务的童鞋应该都知道它的重要性.这里我只是简单的提一下,毕竟这不是 ...

  3. FlashDevelop 发布SWC

    环境配置: 1.安装32位Java,经测试可用的 链接:http://pan.baidu.com/s/1i4CraXR 密码:xuud 2.ant,链接:http://pan.baidu.com/s/ ...

  4. linux 排查page的状态问题

    最近遇到一个page的释放异常的问题,堆栈如下: [ 1000.691858] BUG: Bad page state in process server.o pfn:309d22 [ mapcoun ...

  5. Haskell语言学习笔记（19）File IO

    关于IO Action 类型为IO t. 运算时不执行,因而没有任何效果,只有执行时才会有效果,产生副作用. 一个IO Action只有在其他IO Action中才能被执行. 类型为IO t的IO A ...

  6. 免費查看SQL PLAN的工具 - SQL Sentry Plan Explorer

    今天 Terry大 介紹給小弟這個 SQL Sentry Plan Explorer 工具,可以用來看SQL Plan. 什麼? 用SSMS看不就很清楚了嗎? 這個Tool有把SQL Plan幫我們整 ...

  7. highstock无图像

    如果你的x轴是时间又是世纪秒的话又按以下设置的话,把xAxis的设置去掉试试看, 因为highstock会对世纪秒自动转换的 // xAxis: {// // max: 23, // min: 0, ...

  8. C#自制Web 服务器开发：mysql免安装版配置步骤详解分享

    mysql免安装版配置步骤详解分享 1.准备工作 下载mysql的最新免安装版本mysql-noinstall-5.1.53-win32.zip,解压缩到相关目录,如:d:\ mysql-noinst ...

  9. swift杂记

    1.0   数据类型强转  范围小 --->范围大  不会丢失精度  : 范围大 ---> 范围小 ,可能丢失精度 如 :Int(4.2) = 4 :CGFloat(2) = 2.0 2. ...

  10. Kubernetes+Prometheus+Grafana部署笔记

    一.基础概念 1.1 基础概念 Kubernetes(通常写成“k8s”)Kubernetes是Google开源的容器集群管理系统.其设计目标是在主机集群之间提供一个能够自动化部署.可拓展.应用容器可 ...