In the Angular.js documentation you can find a sample of how to use the orderby filter.
The problem is that this sample is already quite complex and allows you to specify a custom filter based on a predicate value.
Here is a simple sample that applies the order filter based on a specific column:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| var app = angular.module("movieApp", []); | |
| }()); | |
| |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function (app) { | |
| var MovieListController = function ($scope, $window,movieService) { | |
| var setMovies = function (response) { | |
| $scope.movies = response.data; | |
| }; | |
| var onError = function (error) { | |
| if (error.status == 404) { | |
| $scope.error = "Not found!"; | |
| } else { | |
| $scope.error = "Unexpected error"; | |
| } | |
| } | |
| $scope.movies = movieService | |
| .getAll() | |
| .then(setMovies); | |
| $scope.raiseAlert = function (message) { | |
| $window.alert(message); | |
| }; | |
| $scope.flag = true; | |
| $scope.edit = function (movie) { | |
| $scope.editable = { | |
| index: $scope.movies.indexOf(movie), | |
| movie: angular.copy(movie) | |
| }; | |
| }; | |
| }; | |
| MovieListController.$inject = ["$scope", "$window", "movieService"]; | |
| app.controller("MovieListController", MovieListController); | |
| }(angular.module("movieApp"))); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>IMDB But Better</title> | |
| <link href="Content/bootstrap.css" rel="stylesheet" /> | |
| </head> | |
| <body data-ng-app="movieApp" > | |
| <h1>IMDB But Better</h1> | |
| <pre> | |
| </pre> | |
| <div data-ng-controller="MovieListController" class="row"> | |
| <div class="col-md-6"> | |
| <table class="table table-striped table-hover"> | |
| <thead> | |
| <tr> | |
| <th>Title</th> | |
| <th>Length</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tr data-ng-repeat="movie in movies | orderBy:'length'"> | |
| <td>{{movie.title}}</td> | |
| <td>{{movie.length}}</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| <script src="scripts/angular.js"></script> | |
| <script src="scripts/jquery-1.9.1.js"></script> | |
| <script src="scripts/bootstrap.js"></script> | |
| <script src="movieApp/movieApp.min.js"></script> | |
| <script src="movieApp/controllers/movieListController.min.js"></script> | |
| </body> | |
| </html> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function (app) { | |
| var movieService = function ($http) { | |
| var getAllMovies = function () { | |
| return $http.get("movieApp/data/movies.json"); | |
| }; | |
| return { | |
| getAll:getAllMovies | |
| }; | |
| } | |
| movieService.$inject = ["$http"]; | |
| app.factory("movieService", movieService); | |
| }(angular.module("movieApp"))); | |