AngularJS orderBy filter

created by ozkary.com

by ozkary

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<div ng-app="app">
  <div ng-controller="appCtrl as ctrl" class="body-content panel-body">
    <h4 class="text-center text-info">orderBy Filter with Objects by ozkary.com</h4>

    <div class="container-fluid">
      <div class="row">
        <div class="control-group">
          <div class="controls">
            <label class="control-label">Vehicle List by Year</label>
            <hr/>
          </div>
          <div>
            <h3>
  Object Collection
</h3>
            <ul>
              <li ng-repeat="item in ctrl.list | orderBy:'-year'" ng-init="item.name = item.year + ' '+ item.make +' '+ item.model"><i class="fa fa-car fa-2x text-danger">&nbsp;</i> {{item.name}}</li>
            </ul>
            <hr/>
            <h3>
Array Of Objects
</h3>

            <ul>
              <li ng-repeat="item in ctrl.arr | orderBy:'-year'" ng-init="item.name = item.year + ' '+ item.make +' '+ item.model"><i class="fa fa-car fa-2x text-success">&nbsp;</i>{{item.name}}</li>
            </ul>
            <hr/>

          </div>
        </div>
      </div>
      <div class="row">
        <br />
      </div>
    </div>

  </div>


</div>
<br/>

JavaScript

(function(angular) {
  'use strict';
  var appName = 'app';
  var app = angular.module(appName, []);
  app.controller('appCtrl', ['$scope', appCtrl]);

  function appCtrl($scope) {
     var ctrl = this;
    var list = {};
    list[2009] = {
      make: 'Nissan',
      model: 'Altima',
      year: 2009
    };
    list[2010] = {
      make: 'Nissan',
      model: 'XTerra',
      year: 2010
    };
    list[2012] = {
      make: 'Nissan',
      model: 'Maxima',
      year: 2012
    };

    ctrl.list = list;

    var arr = Object.keys(list).map(function(key) {
      return list[key];
    });

    ctrl.arr = arr;
  }

})(angular);