概要

AngularJS にはモデルの値を表示用に変換するフィルタという機能があります。コマンドラインにおけるパイプのように使用します。公式ドキュメントはこちらです。

フィルターの使用例

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="angular.min.js"></script>
</head>
<body>

ここにサンプルコードを記述。

</body>
</html>

filter (絞り込み)

<div ng-controller="myController">
  <p>部分一致</p>
  <ul>
    <li ng-repeat="item in mylist | filter:'str'">{{ item }}</li>
  </ul>
  <p>完全一致 ({{ filtered_mylist.length }} 件)</p>
  <ul>
    <li ng-repeat="item in mylist | filter:'str':true as filtered_mylist">{{ item }}</li>
  </ul>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', function($scope){
   $scope.mylist = [
     { key: 'str' },
     'abc',
     'string',
     'str'
   ];
 }]);
</script>

limitTo (表示個数の制限)

<div ng-controller="myController">
  <ul>
    <li ng-repeat="item in mylist | limitTo:2">{{ item }}</li>
  </ul>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', function($scope){
   $scope.mylist = [1,2,3,4,5];
 }]);
</script>

orderBy (ソート)

<div ng-controller="myController">
  <p>昇順</p>
  <ul>
    <li ng-repeat="item in mylist | orderBy:'mykey'">{{ item.mykey }}</li>
  </ul>
  <p>降順</p>
  <ul>
    <li ng-repeat="item in mylist | orderBy:'mykey':true | limitTo:2">{{ item.mykey }}</li>
  </ul>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', function($scope){
   $scope.mylist = [
     { mykey: 3 },
     { mykey: 1 },
     { mykey: 2 }
   ];
 }]);
</script>

lowercase / uppercase (小文字化、大文字化)

<div ng-controller="myController">
  <p>{{ myModel | lowercase }}</p>
  <p>{{ myModel | uppercase }}</p>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', function($scope){
   $scope.myModel = 'Abc';
 }]);
</script>

number (数値の整形)

小数第二位まで表示するためには :2 とします。

<div ng-controller="myController">
  <input type="text" ng-model="myNumber">
  <p>{{ myNumber | number:2 }}</p>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', function($scope){
   $scope.myNumber = 10 / 3;
 }]);
</script>

json (オブジェクトを JSON 形式文字列に変換)

この続きが気になる方は

フィルター (AngularJS)

残り文字数は全体の約 43 %

tybot

100 円

* プログラミング情報の有料公開およびご購入について

* ご購入済みの方はこちらからログイン