AngularJS——第4章数据绑定

第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章数据绑定

第4章数据绑定

4.1 单向绑定

4.2 双向绑定

4.3 相关指令

初始化

为DOM元素添加事件

数据筛选

最新文章

热门文章

巴特西

AngularJS——第4章 数据绑定

第4章 数据绑定

4.1 单向绑定

4.2 双向绑定

4.3 相关指令

初始化

为DOM元素添加事件

数据筛选

最新文章

热门文章

AngularJS——第4章数据绑定

第4章数据绑定