filterフィルタのサンプル

filterフィルタで絞り込む場合の例

by Shuya Tsukamoto

HTML

<div ng-app="myApp" ng-controller="myCtrl">
     <h2>Case 1</h2>

    <p>before filter</p>
    <ul>
        <li ng-repeat="item in items">name:{{item.name}} price:{{item.price}}</li>
    </ul>
    <hr>
     <h2>Case 2</h2>

    <p>after filter</p>
    <ul>
        <li ng-repeat="item in items | filter:{name:'ap'}:myComparator">name:{{item.name}} price:{{item.price}}</li>
    </ul>
</div>

JavaScript

var app = angular.module("myApp", []);

app.controller("myCtrl", function ($scope, $filter) {
    $scope.items = [{
        name: "Apple",
        price: 290
    }, {
        name: "Orange",
        price: 130
    }, {
        name: "Grape",
        price: 450
    }];

    $scope.myComparator = function (expected, actual) {
        // indexOfにより大文字、小文字を区別したマッチングを行う
        if (expected.indexOf(actual) == -1) {
            return false;
        } else {
            return true;
        }

    };

});