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:’¥’ }
- 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指令,执行控制器中的代码。