AngularJS数据绑定和数据过滤

阐述

有许多的方式构建应用程序的代码,在Angular的世界里,我们推荐使用Model-View-Controller(MVC)设计模式去解耦代码和分离问题。考虑到这点,让我们使用少量的Angular和JavasScript去添加模型,视图,控制器组件到我们的App。


接下来,我们学习下数据绑定跟过滤。
在Angular里,视图是被投影到HTML模板里的,这样当模型发生变化,Angular将会刷新相应的绑定点、实现视图更新。

视图跟模板:

这个模板的视图组件是由Angular构建的。

<html ng-app="DestApp">
    <head>
        <meat charset="utf-8" />
        <title>Document</title>
        <script src="http://libs.useso.com/js/angular.js/1.2.9/angular.js"></script>
        <script src="dest.main.js"></script>
    </head>
    <body ng-controller="destCtrl">
        <h1>{{ title }}</h1>    
        <div ng-repeat="name in nameList | filter:query">
            {{ name.message }}
        </div>
        <input ng-model="query"><!--通过它我们实现交互式数据过滤-->
    </body>
</html>

我们替换hard-coded列表用ngRepeat directiveAngular expressions
* ng-repeat="name in nameList | filter:query" 属性是一个Angular 的中继器指令,中继器告诉Angular遍历nameList列表使用<div> 标签创建多个html节点。并且绑定到query 输入框实现数据过滤,一旦有任何改变,将直接影响列表的内容。
* 包裹在{{ name.message }} 里的表达式,将会被替换成表达式的值


模型和控制

// 记得保存编码要跟html页面的<meat charset="utf-8" />声明编码统一(UTF-8),不然中文乱码~
var DestApp = angular.module('DestApp', []);

DestApp.controller('destCtrl', function($scope){
    $scope.nameList = [
        {'message': 'Hello'},
        {'message': 'Aey'},
        {'message': 'Elon'}
    ];
    $scope.title = '这是标题';
});

好了,这就会数据绑定和数据过滤了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值