angularjs フィルターの解析例

現在、同社は Web アプリ用に angularjs に基づいていくつかの API をカプセル化する ionic を使用しています。これにより、実際に多くのコードが節約されました。

比較的役に立たないフィルターがあるので、ここで簡単に説明しておきます。チキンスープに一般的に使用されるフィルターの例を以下に示します。

小文字(小文字)

{{姓 | 小文字}}

大文字(大文字)

{{姓 | 大文字}}

数値(フォーマットされた数値)

数値フィルターは、数値に千を追加できます。このように、123,456,789。同時に、Small float 型が保持する小数点以下の桁数を指定できるパラメータを受け取ります。 ￥'}}

json(jsonオブジェクトの書式設定)

{{ jsonTest | json}}

関数はおなじみのJSON.stringify()と同じです

limitTo(配列長または文字列長を制限)

{ { childArray | limitTo : 3 } } //配列内の最初の 3 つの項目が表示されます

フィルター (部分文字列に一致)

は配列を処理し、特定の部分文字列を含む要素をフィルターで除外し、それらをサブアレイ。文字列の配列またはオブジェクトの配列を指定できます。オブジェクトの配列の場合、属性の値を照合できます。パラメータを受け取り、部分文字列一致ルールを定義します。

html

<ul>
 <li>filter 匹配子串(以下写法只是方便观察)</li>
 <li>{{ webArr | filter : &#39;n&#39; }} <!--匹配属性值中含有n的--></li>
 <li>{{ webArr | filter : 25 }} <!--匹配属性值中含有25的--></li>
 <li>{{ webArr | filter : {name : &#39;l&#39;} }} <!--//参数是对象，匹配name属性中含有l的--></li>
 <li>{{ webArr | filter : fun }} <!--/参数是函数，指定返回age>25的--></li>
</ul>

js

$scope.webArr = [
   {name:'nick',age:25},
   {name:'ljy',age:28},
   {name:'xzl',age:28},
   {name:'zyh',age:30}
  ];
$scope.fun = function(e){return e.age>25;};

効果の表示:

フィルターに一致する部分文字列 (以下の記述は観察の便宜のためです)

[{"name":"nick","age":25}]
[{"name":"nick","age":25}]
[{"name":"ljy","age":28},{"name":"xzl","age":28}]
[{"name":"ljy","age":28},{"name":"xzl","age":28},{"name":"zyh","age":30}]

Dateクラス

Dateフィルターはよく使われるフィルターの中で最も単純であるべきです!

yyyy - 年を表します。

MM - 日付 (大文字にする必要があります)。

mm - 分 (小文字にする必要があります)。 --秒 ;

EEEE--週;

hh:mm--形式は 24 時間形式です

h:mma--12 時間形式

年、月、日、時、分。 、2番目または/: - 組み合わせを自分で試してみましょう!

<ul>
 <li>8 日期1</li>
 <li ng-bind="date|date:&#39;yyyy/MM/dd hh:mm:ss EEEE&#39;"></li>
 <li>8 日期2</li>
 <li ng-bind="date|date:&#39;yyyy年MM月dd日 h:mma EEEE&#39;"></li>
 <li>8 日期3</li>
 <li ng-bind="date|date:&#39;yyyy年MM月dd日 hh时mm分ss秒&#39;"></li>
 <li>8 日期4</li>
 <li ng-bind="date|date:&#39;yyyy/MM/dd hh:mm:ss&#39;"></li>
 </ul>

日付1の表示効果:

2016/11/19 11:59:05 Saturday

日付2の表示効果:

2016年11月19日土曜日12:01PM

日付3の表示効果:

November 22, 2016 10:42:09

日付の表示効果 4:

2016/11/22 11:16:58

orderBy sort (7 番目の例が最適な書き方だと思います) ) )

ng-repeat は独立したスコープを生成し、ng-repeat ループの直後にパイプライン orderBy を追加します。

使用法は非常に簡単ですが、注意する必要がある落とし穴が 2 つあります:

パラメータの引用符を忘れないでください。

パラメータ形式 - age として直接記述します。item2 として記述する必要はありません。 。年。

3 最初に年齢で昇順に並べ替え、次に身長で降順で並べ替えます (すべて降順で並べ替えると、効果は得られません。例 7 を参照)。

かつて素朴にこのように書いたこともあります^*^

<ul>
 <li>3 按年龄排序(默认升序)</li>
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

効果の表示:

按年龄排序(默认升序)
name ljy
age 27
stature 165
name nick
age 25
stature 170
name xzl
age 27
stature 175
name zyh
age 29
stature 165

6 まず年齢順に並べ替えます 身長順に並べ替えます (複数のパラメータを配列形式で書き込みます)

<ul>
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:true">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

効果表示:

按年龄排序(加参数true则为倒序即降序)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170

7 まず年齢順に昇順に並べ替え、次に身長順に降順に並べ替えます (複数のパラメータを配列形式で書き込みます) )

パラメータの前にマイナス記号を付けるだけ 逆順の実装

<ul>
 <!--<li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:&#39;-stature&#39;">-->
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:&#39;stature&#39;:true">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

効果表示:

想先按年龄升序在按身高降序(全是降序了，达不到效果，见第7例)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170

個人的には、ngに組み込まれているフィルタの多くはかなり役に立たないと思っています。個々のニーズに合わせてフィルターをカスタマイズします。

カスタム フィルター

カスタム フィルターは関数を返すだけで、その関数は必要な値を返します。

例:

<ul>
 <li ng-repeat="item2 in items2|orderBy:[&#39;age&#39;,&#39;stature&#39;]">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

合計フィルターをカスタマイズする

html

先按年龄在按身高排序(多个参数写出数组形式)
name nick
age 25
stature 170
name ljy
age 27
stature 165
name xzl
age 27
stature 175
name zyh
age 29
stature 165

使用法:

パイプラインの前後のすべてのパラメータは合計です

js

<ul>
 <li ng-repeat="item2 in items2|orderBy:[&#39;age&#39;,&#39;-stature&#39;]">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

arguments--関数、クラス配列によって受け入れられるパラメータのセット;

Array.prototype.slice.call(arguments)

この文はクラス配列を配列に変換します

sum+=arr[i]?arr[i]:0;

合計はと の配列の各要素の累積。バックグラウンドで値を渡したり、カスタム ファイラー関数にパラメータとして二次パラメータを渡したりすることは避けてください。フォールト トレラントの場合は、安全性を確保するために 0 を書き込みます。

フィルターをカスタマイズしてパーセンテージを検索します (パーセンテージを小数点以下 2 桁で検索します)

html

!!7 先按年龄升序在按身高降序(多个参数写出数组形式)
name nick
age 25
stature 170
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name zyh
age 29
stature 165

使用法:

分子はパイプの前に書き込まれ、パイプが追加された後にすべてのパラメーターの合計が表示されますパイプの前のパラメーターが分母になります

js

angular.module('youAppName',[])
  .filter('youFilterName',function(){
   return function(){
   //你的处理代码
   return result;//返回你要的值
   }
  })

上記の合計のフィルターに関する追加の文は次のとおりです:

sum==0?'0%':Math.round((arr[0]? arr[0]:0) /sum*10000)/100+"%"

Math 組み込み関数、Math.round で整数を維持します

合計を 10000 で乗算し、100 で割ってパーセンテージを結合します。符号、つまり小数点以下 2 桁を保持します。

完全なコード:

<ul>
<li>!!1 求和</li>
<li ng-repeat="item1 in items1">
 <div ng-bind="item1.male | sumNick:item1.female:item1.gay"></div>
</li>
</ul>

以上がこの記事の全内容です。この記事の内容が皆さんの学習や仕事に少しでも役立つことを願っています。また、PHP 中国語 Web サイトもサポートしたいと思っています。

angularjs フィルター関連の記事の解析例については、PHP 中国語 Web サイトに注目してください。