AngularJS orderBy

Triedenie tabuľky kliknutím na názov stĺpca.

Triedenie tabuľky kliknutím na názov stĺpca. Zoznam Arduino dosiek s fiktívnou cenou sa triedi podľa konkrétneho stĺpca.
Názov Cena
{{x.name}} {{x.price}}

script

<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js></script>

orderby.html

<div ng-app="myApp" ng-controller="myCtrl">

<table class="table table-striped">
  <tr>
    <th ng-click="orderByColumn('name')">Názov</th>
    <th ng-click="orderByColumn('price')">Cena</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:order_column">
    <td>{{x.name}}</td>
    <td>{{x.price}}</td>
  </tr>
</table>

</div>

orderby.js

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $filter) {
    $scope.names = [
        {name: 'Arduino Uno', price: 20},
        {name: 'Arduino Due', price: 30},
        {name: 'Arduino Zero', price: 35},
        {name: 'MKR1000', price: 40},
        {name: 'Arduino Leonardo', price: 10},
        {name: 'Arduino Mega', price: 22},
        {name: 'MKRZero', price: 30},
        {name: 'LiliPad', price: 10},
        {name: 'Arduino Yún', price: 200}
    ];

    $scope.order_column = 'price';

    $scope.orderByColumn = function(x) {
        $scope.order_column = x;
    }
});