27 October, 2014
0 Comments
1 category
Just a nice example on how to sort items in a list with ng-repeat:
http://plnkr.co/edit/qa6LdhDdggApWPmOrwGD?p=preview
<!DOCTYPE html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="spike"> <head> <!-- This page can be used as a base for spiking with jQuery, AngularJS and Kendo. All scripts and styles are loaded from a CDN or inline. --> <title>Spike page</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Use highest support for modern standards . --> <!-- Library styles --> <!-- Library scripts --> <script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script> <!-- App styles --> <style> /* A small custom reset stylesheet is used, to fix style differences between browsers. */ html, body { height: 100%; /* App layout uses a 100% height layout. */ } body, div, p, ul, li { border: 0; /* Remove unwanted space. */ -webkit-box-sizing: border-box; /* Place the border and padding inside the box. */ -moz-box-sizing: border-box; /* Place the border and padding inside the box. */ -ms-box-sizing: border-box; /* Place the border and padding inside the box. */ -o-box-sizing: border-box; /* Place the border and padding inside the box. */ box-sizing: border-box; /* Place the border and padding inside the box. */ margin: 0; /* Remove unwanted space. */ outline: 0; /* Remove unwanted space. */ padding: 0; /* Remove unwanted space. */ } body { padding: 20px; /* Create space between browser border and content. */ min-width: 320px; /* App will not work beneath width: 320px. */ } </style> <!-- App scripts --> <script> (function () { "use strict"; // This is the starting point (main) for the angular app. var app = angular.module("spike", ["kendo.directives"]); }()); (function () { "use strict"; var app = angular.module("spike"); var controller = function ($scope, service) { $scope.title = "Sort items in a list."; $scope.countriesAndCities = [ { "id": 1, "name": "The Netherlands", "show": true, "sort": 1 }, { "id": 2, "name": "Amsterdam", "show": true, "sort": 2 }, { "id": 3, "name": "Rotterdam", "show": false, "sort": 3 }, { "id": 4, "name": "US", "show": false, "sort": 4 }, { "id": 5, "name": "Las Vegas", "show": true, "sort": 5 }, { "id": 6, "name": "New York", "show": true, "sort": 6 } ]; }; app.controller("main", ["$scope", controller]); }()); </script> </head> <body> <div ng-controller="main"> <h2>{{ title }}</h2> <div> <br /> Normal order: <br /> <br /> <div ng-repeat="item in countriesAndCities | filter: { show: true } | orderBy:'sort':true"> {{ item.name }} </div> <br /> <br /> Reversed order: <br /> <br /> <div ng-repeat="item in countriesAndCities | filter: { show: true } | orderBy:'sort':false"> {{ item.name }} </div> </div> </div> </body> </html>
Tags: AngularJS
Category: Uncategorized