温故知新:Anglarのfilter
2274 ワード
Angularの中のfiltreは個人的には理解できますが、文字通りフィルタは変数をフィルタして処理します.処理後の変数に戻ります.例えば、FilterNameはフィルタの名前です.peopleは処理する変数の量です.paraはオプションのパラメータです.実は、FilterNameは関数であり、その戻り値も関数であり、peopleとparaはこの戻り値のパラメータである.具体例を見てみます.
filter.
次にこの関数の機能を見ます.nameの値によって色が違ってきます.
filterを見てください.ここではどのように呼び出されますか?ng-repeat属性のタグがあります.controllerの中で、scope.peoplesのリストですが、単純な列ではなく、$scope.peoplesの名前の最初の文字によって色が違ってきます.これは上に書いた行内フィルタを使いました.124 SelectName｝
説明してください.SelectNameはカラー関数という名前を返します.その後、peopleはそのnameを0と表記した要素をこの関数に導入しました.関数処理が終わったら結果returnをbackground-カラーの後ろに送ります.このように ラベルは色が違っています.
filter.
<html>
<title>Test Filter</title>
<head>
<script src='E:\Angularjs\angular-1.0.8\angular.js'></script>
<script src='E:\filter.js'></script>
</head>
<body ng-app='filter' ng-controller='FilterController'>
[list]
<li ng-repeat='people in peoples' style='background-color:{{people.name[0] | SelectName}}'>
{{people.name}}
</li>
[/list]
</body>
</html>
function FilterController($scope){
$scope.peoples = [{'name':'A1'},{'name':'A2'},{'name':'A3'},{'name':'B1'},{'name':'B2'},{'name':'B3'},{'name':'C1'},{'name':'C2'},{'name':'C3'},{'name':'D1'},{'name':'D2'},{'name':'D3'}];
}
angular.module('filter',[]).controller('FilterController',FilterController).filter('SelectName',function(){
var color = function(name){
switch(name){
case 'A':return 'red';
case 'B':return 'green';
case 'C':return 'blue';
case 'D':return 'yellow';
}
}
return color;
});
次にこの関数の機能を見ます.nameの値によって色が違ってきます.
filterを見てください.ここではどのように呼び出されますか?ng-repeat属性の
説明してください.SelectNameはカラー関数という名前を返します.その後、peopleはそのnameを0と表記した要素をこの関数に導入しました.関数処理が終わったら結果returnをbackground-カラーの後ろに送ります.このように