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 (HTML Markup version with string 'ap')</p>
    <ul>
        <li ng-repeat="item in items | filter:'ap'">name:{{item.name}} price:{{item.price}}</li>
    </ul>
    <hr>
     <h2>Case 3</h2>

    <p>after filter (HTML Markup version with string '130')</p>
    <ul>
        <li ng-repeat="item in items | filter:'130'">name:{{item.name}} price:{{item.price}}</li>
    </ul>
    <hr>
     <h2>Case 4</h2>

    <p>after filter (HTML Markup version with object.name '130')</p>
    <ul>
        <li ng-repeat="item in items | filter:{name:'130'}">name:{{item.name}} price:{{item.price}}</li>
    </ul>
    <hr>
     <h2>Case 5</h2>

    <p>after filter (JavaScript version with object.name 'ap')</p>
    <ul>
        <li ng-repeat="item in filterdItems">name:{{item.name}} price:{{item.price}}</li>
    </ul>
    <hr>
     <h2>Case 6</h2>

    <p>after filter (JavaScript version with object.name '130')</p>
    <ul>
        <li ng-repeat="item in filterdItems2">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.filterdItems = $filter("filter")($scope.items, {
        name: "ap"
    });
    $scope.filterdItems2 = $filter("filter")($scope.items, {
        name: "130"
    });

});