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" }); });
<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>