AngularJS - planets

List of planets, filterable and sortable

by jmgonet

HTML

<div ng-app="planApp">
    <div ng-controller='mainController'>
        <p>Name of the planet: <input type="text" ng-model="planetFilter.name"/></p>
        <p>Price of the planet: <input type="text" ng-model="planetFilter.price"/></p>
        <p> Sorting by:
        <select ng-model="criteriaSorting">
            <option value="name">Sort by name</option>
            <option value="price" selected>Sort by price</option>
        </select>
        <select ng-model="reverseSorting">
            <option value="true">Reverse sorting</option>
            <option value="false" selected>Normal sorting</option>
        </select>
        </p>
        <p>List of planets is:</p>
        <dl ng-repeat="planet in planets | filter: planetFilter | orderBy:criteriaSorting:reverseSorting">
            <dt>{{planet.name}}</dt>
            <dd>{{planet.price | currency:'CHF '}}</dd>
        </dl>
     </div>
</div>

JavaScript

/**
 * List of planets, filterable and sortable
 */
var planApp = angular.module("planApp",[])

.controller('mainController',function($scope) {
    var planets=
        [
            {name:'mercure', price:'2000'},
            {name:'venus', price:'1000'}, 
            {name:'terre', price:'3000'}
        ];
    $scope.planets = planets;
});