AngularJS Program 4 – Filtering Repeaters with Sorting


<html ng-app>
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
<body ng-controller="PhoneListCtrl">
    <div class="container-fluid">
        <div class="row-fluid">
                Search: <input ng-model="query">
                Sort by:
                <select ng-model="orderProp">
                    <option value="name">Alphabetical</option>
                    <option value="snippet">Snippet</option>
                    <option value="age">Newest</option>
                    <option value="-name">Desc Alphabetical</option>
                    <option value="-snippet">Desc Snippet</option>
                    <option value="-age">Desc Newest</option>
                <ul class="phones">
                    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">{{}}

    <p>Total number of phones: {{phones.length}}</p>
    <div id="status">Current filter: {{query}} || and Order by {{orderProp}}</div>
    <hr />
    <table border="1">
            <th>Row Number</th>
        <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
            <td>{{'Row : ' + i}}</td>
    <hr />



function PhoneListCtrl($scope) {
    $scope.phones = [
        {"name": "Nexus S",
        "snippet": "Fast just got faster with Nexus S.",
        "age": 0},
        {"name": "Motorola XOOM™ with Wi-Fi",
        "snippet": "The Next, Next Generation tablet.",
        "age": 1},
        {"name": "MOTOROLA XOOM™",
        "snippet": "New Tablet.",
        "age": 2}
    $scope.orderProp = 'snippet';
    $scope.hello = "Hello, World!"



You can leave a response, or trackback from your own site.

Leave a Reply