AngularJS——第4章数据绑定

最新推荐文章于 2024-09-02 20:20:53 发布

weixin_30432179

最新推荐文章于 2024-09-02 20:20:53 发布

阅读量69

点赞数

文章标签： javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/luoyu113/p/8544685.html

版权

第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可以对数据进行筛选。

转载于:https://www.cnblogs.com/luoyu113/p/8544685.html

weixin_30432179

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS——第4章数据绑定

第4章数据绑定AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）展示到视图（View）中。所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联，分为单向绑定和双向绑定两种方式。4.1 单向绑定单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到D...
复制链接

扫一扫