从零学习Angularjs-过滤器以及作用域

1.过滤器

过滤器的主要功能是格式化数据可以使用Angular提供的过滤器，也可以自定义过滤器 Angular过滤器：

currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制长度)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。

例：

• {{ nowdate | date:’yyyy-mm-dd hh:mm:ss’}}

过滤器的3种调用方式：

• 单个过滤器 { 100.00 | currency } $100.00
• 多个过滤器 { 100.00 | currency | number:1 }$100.0
• 带参数的过滤器 { 100.00 | currency:’￥’ }

---

1. filter过滤器
   （1）filter过滤器会根据设置的检索数据过滤未匹配到的数据内容，也可以通过设置检索条件为一个对象，实现在指定属性中检索。

<ul class="messages">
    <li ng-repeat="item in messages | filter:{content:123}">
        {{item.content}}
    </li>
</ul>

（2）filter过滤器会根据设置的检索数据过滤未匹配到的数据内容，也可以通过设置检索条件为一个对象，实现在指定属性中检索。

<ul class="messages">
    <li ng-repeat="item in messages | filter:{content:123}">
        {{item.content}}
    </li>
</ul>

（3）过滤器函数参数

<ul class="numbers">
    <li ng-repeat="item in numbers | filter:1:comparator">
        {{ item }}
    </li>
</ul>
// js代码
$scope.comparator = function (source,target) {
    return source > target;
};

（4）自定义过滤器 Module.filter（）

angular.module('MyAppFilters', []).filter('checkmark', function() {
    return function(input) {   //过滤器函数 接受一个参数 为需要过滤的数据
        return input ? ‘\u2713’ : ‘\u2718’;  //返回过滤后的数据格式
    };
});

{{  name  |  checkmark }}

2.作用域

　　AngularJS对象提供的controller方法可以创建控制器。创建控制器后，需要区别控制器所支持的视图。通过ng-controller指令可以指定控制器支持的视图。控制器的参数包括一个工厂函数，该函数接受一个参数scope，表明该控制器对scope服务的依赖。这时控制器可以通过scope对应的作用域与视图建立联系。
　　scope作用域不但定义了控制器和视图之间的关系，而且对许多重要的AngularJS特性如：数据绑定，提供了运转机制。 控制器通过在控制器函数中定义数据和行为使用作用域。

　　$scope对象实际上是一个作用域对象，作用域能存储数据模型，为表达式提供上下文环境，监听表达式的变化，传播事件。是视图和控制器之间的重要桥梁。
　　作用域的特点：为表达式提供执行环境，一个表达式必须在拥有该表示式属性的作用域中执行。作用域通过提供scope对象，使所有的表达式都拥有对应的执行环境，也就是执行的上下文。
　　提供了一个watch方法监听数据模型的变化，之所以能使用ng-model指令实现数据的双向绑定，就是隐式的调用该方法进行数据模型的监听，只要有一端发生变化，另外绑定的一端自动进行数据同步。
　　提供了一个apply方法，为各种类型的数据模型改变提供支撑，将它们引入到Angular可控制的范围中。这个可控制的范围最典型的就是控制器，例如：通过ng-click指令，执行控制器中的代码。