Angular: Empty Fiddle

http://angularjs.org/

by Salmin Skenderovic

HTML

<script src="https://code.angularjs.org/1.2.25/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.1.1/angular-filter.min.js"></script>
<div ng-controller="MyCtrl">

  <div ng-repeat="item in sortedItems | orderBy: 'price'">
    
    <div class="item">
      Egentlig ordning: {{items[$index].color}} <br>
      {{item.name}} - {{item.price}}
    </div>
  
  </div>
  
</div>

CSS

.item {
  width: 30%; 
  float: left;
  padding: 5px;
  border: 1px solid black;
  margin: 5px;
}

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.items = [
      {name: "Grön sak1", color: "Grön", price: 200},
      {name: "Blå sak2", color: "Blå", price: 300},
      {name: "Röd sak1", color: "Röd", price: 400},
      {name: "Grön sak2", color: "Grön", price: 100},
      {name: "Röd sak2", color: "Röd", price: 2500},
      {name: "Grön sak3", color: "Grön", price: 100},
      {name: "Blå sak4", color: "Blå", price: 600},
      {name: "Grön sak4", color: "Grön", price: 700},
      {name: "Röd sak3", color: "Röd", price: 450},
      {name: "Blå sak3", color: "Blå", price: 50},
      {name: "Röd sak4", color: "Röd", price: 10},
      {name: "Blå sak1", color: "Blå", price: 1200},
    ];
}