Angular之過濾器(filter)與作用域(scope)

過濾器(filter)

1. 內置過濾器

包含以下9種過濾器:

currency(貨幣處理)
使用currency可以將數字格式化為貨幣,默認是美元符號,你可以自己傳入所需的符號,例如傳入人民幣:{{num | currency : '¥'}} date(日期格式化)
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
y M d h m s E 分別表示 ‘年 月 日 時 分 秒 星期’,除此之外還有更多,
你可以自由組合它們。也可以使用不同的個數來限制格式化的位數。另外參數也可以使用特定的描述性字符串,例如“shortTime”將會把時間格式為 12:05 pm這樣的。angular提供瞭八種描述性的字符串 filter(匹配子串)
用來處理一個數組,然後可以過濾出含有某個子串的元素,作為一個子數組來返回。可以是字符串數組,也可以是對象數組。如果是對象數組,可以匹配屬性的值。它接收一個參數(這個參數可以是字符串,也可以是函數),用來定義子串的匹配規則。

    $scope.arr = [
        {name:'cat',sing:'mewed'},
        {name:'dog',sing:'bark'},
        {name:'pig',sing:'hanghang'},
        {name:'bird',sing:'song'},
    ];
    $scope.func = function(e){return e.sing='hanghang';}

    {{ arr | filter : 'g' }} //匹配屬性值中含有c的
    {{ arr | filter : {name : 'i'} }} //參數是對象,匹配name屬性中含有d的
    {{childrenArray | filter : func }}  //參數是函數,指定返回sing='hanghang'的

json(格式化json對象)
{{ jsonTest | json}}
json過濾器可以把一個js對象格式化為json字符串,沒有參數。
這個過濾器一般在實際生產環境中用不到,官方的解釋是方便開發者調試。 limitTo(限制數組長度或字符串長度)
limitTo過濾器用來截取數組或字符串,接收一個參數用來指定截取的長度,隻能從數組或字符串的開頭進行截取,沒有原生js好用:
{{ arr | limitTo : 2 }} //將會顯示數組中的前兩項 uppercase(大寫) lowercase(小寫) number(格式化數字)
number過濾器可以為一個數字加上千位分割,像這樣,123,456,789。同時接收一個參數,可以指定小float類型保留幾位小數.
{{ num | number : 2 }} orderBy(排序)
orderBy過濾器可以將一個數組中的元素進行排序,接收一個參數來指定排序規則,參數可以是一個字符串,表示以該屬性名稱進行排序。可以是一個函數,定義排序屬性。還可以是一個數組,表示依次按數組中的屬性值進行排序(若按第一項比較的值相等,再按第二項比較).

{{ childrenArray | orderBy : 'age' }}

//按age屬性值進行排序

{{ childrenArray | orderBy : orderFunc }}

//按照函數的返回值進行排序

{{ childrenArray | orderBy : ['age','name'] }}

//如果age相同,按照name進行排序

2. 過濾器的使用

單個過濾器
{{表達式 | 過濾器名}}
例如:{{8.88 | currency}} ==> $8.88 多個過濾器
{{表達式 | 過濾器名1 | 過濾器名2 | …}} 帶參數過濾器
{{表達式 | 過濾器名1:參數1 : 參數2 : …}}
例如:{{ 88886.88 | number:1 }} ==> 88,886.9

3. 自定義過濾器

??filter的自定義方式也很簡單,使用module的filter方法,返回一個函數,該函數接收輸入值,並返回處理後的結果。

    
  • 序號 姓名 性別 年齡 分數
  • {{$index+1}} {{stu.name}} {{stu.gender}} {{stu.age}} {{stu.score}}

<script type=”text/javascript”>
var app=angular.module(‘myapp’,[]);
app.controller(‘myController’,[‘$scope’,function($scope){
$scope.data=[
{name:’王二’,gender:’女’,age:24,score:95},
{name:’張三’,gender:’女’,age:27,score:87},
{name:’李四’,gender:’女’,age:28,score:87},
{name:’趙五’,gender:’男’,age:28,score:86},
{name:’劉六’,gender:’男’,age:23,score:97}
];
}]);

app.filter(‘young’,function(){
return function(e,type){
var _out=[];
var _gender=type?’男’:’女’;
for(var i=0;i22 && e[i].age<28 && e[i].gender==_gender){
_out.push(e[i]);
}
console.log(_out);
}
return _out;
}
})
</script>

??這裡定義瞭一個名為’young’的自定義指令,指令中定義瞭兩個形參e 和 type,前者e參數在調用的時候,將會被需要過濾的數據自動註入,在這裡代表的是$scope.data,後者yupe接受young指令後的參數,在這裡指得是0,type?'男':'女'表示type=0就選女,否則就選男,這裡選的是’女’,然後再判斷age>22&&age<28,將所有的結果集合返回。
??這裡最終頁面將顯示$scope.data中的前兩項。

4. 過濾器的具體應用

4.1表頭排序

表頭排序是指在使用列表方式顯示數據時,將根據用戶點擊的那一列數據的屬性值進行排序,默認為升序排列,再次單擊則變為降序

 
  • 序號 姓名 性別 年齡 vcmU=”;desc=!desc”>分數
  • {{$index+1}} {{stu.name}} {{stu.gender}} {{stu.age}} {{stu.score}}

<script type=”text/javascript”>
var app=angular.module(‘myapp’,[]);
app.controller(‘myController’,[‘$scope’,function($scope){
$scope.title=”name”;
$scope.desc=0;
$scope.data=[
{name:’王二’,gender:’女’,age:24,score:95},
{name:’張三’,gender:’女’,age:27,score:87},
{name:’李四’,gender:’女’,age:28,score:87},
{name:’趙五’,gender:’男’,age:28,score:86},
{name:’劉六’,gender:’男’,age:23,score:97}
];
}]);
</script>

4.2 字符查找

調用filter過濾器,查找與過濾器冒號後字符參數相匹配的數據。
還是上面4.1的內容,增加輸入框元素:

將過濾表達式換成:

  •  


作用域

1. 作用域的特點

1.1 具體來說,作用域包括以下3個比較顯著特點:

提供瞭一個$watch 方法來監聽數據模型的變化,ng-model的雙向綁定,就是由其支撐。 提供瞭$apply 方法,為各種類型的數據模型改變提供支撐,例如,通過在頁面視圖中的ng-click指令,執行控制器中的代碼。 提供瞭執行的環境,一個表達式必須在擁有該表達式屬性的作用域中執行才更合適,作用域通過$scope 對象,使所有的表達式都擁有對應的執行環境,也就是執行上下文。

1.2 $watch的使用

    

累計變化次數:{{count}}

<script type=”text/javascript”>
var app=angular.module(‘myapp’,[]);
app.controller(‘myController’,[‘$scope’,function($scope){
$scope.count=0;
$scope.name=”;

$scope.$watch(‘name’,function(){
$scope.count++;
})
}])
</script>

??$watch方法對$scope 中的name屬性進行監視,當該屬性發生變化時,將$scope 中的count屬性值累加1.
??其具體原因在於,每次對已綁定ng-model指令的name進行修改時,內部的$digest方法就會自動運行一次,檢測name屬性是否與上次$digest運行時的內容保持一直,如果不一致,則執行$watch綁定的函數。

2. 作用域的層級

頂級作用域隻有一個,下面的子作用域可以存在多個,子作用域可以繼承父作用域的全部屬性和方法,同級子作用域間不可互相訪問各自的屬性和方法。

    
  • {{childFirst}}
  • {{childFirst}}

累計變化次數:{{count}}

??parentController是父級控制器,childfirstController 和 childsecondController是子級控制器,子級控制器可以直接繼承父級控制器作用域中通過$scope添加的屬性和方法,如果父級控制器又通過$rootScope添加瞭屬性和方法,那麼子級作用域將首先訪問$scope,如果沒有找打結果,然後繼續向上再訪問$rootScope。

3. 作用域的事件

有兩種方式可以實現作用域之間的通信;

服務 事件

??要使用事件,必須調用Angular中提供的兩個方法:$broadcast 和 $emit。
其中,$broadcast 的功能是將事件從父級作用域傳播至子級作用域,調用方式如下:
?? $broadcast(evventname,data)

??而$emit 的功能則正好相反,是將事件從子級作用域傳播至父級作用域,調用方式如下:
?? $emit(eventname,data)

??使用$on方法來在作用域中監控傳播來的事件並獲取相應的數據,調用方式如下:

    $on(eventname,function(event,data){
        //處理傳播事件的代碼
    })

$emit隻能向parent controller傳遞event與data $broadcast隻能向child controller傳遞event與data $on用於接收event與data emit和broadcast可以傳多個參數,$on也可以接收多個參數。

其中,eventname為需要監控的傳播事件名稱,event為時間傳播過程中自帶的特征,該特征包括以下幾個重要的屬性:

屬性名稱 功能說明
event.targetScope 返回發出或者傳播原始事件的作用域名稱
event.currentScope 返回正在接收傳播事件的作用域名稱
event.name 傳播事件的名稱
event.stopPropagation 防止事件進行冒泡操作的函數(這隻適用於使用$emit發出的事件)
event.preventDefault 阻止代碼事件的發生
event.defaultPrevented 阻如果調用瞭preventDefault,則為true,否則為false

發佈留言