2016-02-15 4 views
0

Я хотел сортировать даты в угловом JSСортировка Даты в угловом JS

Я использую

orderBy:predicate :reverse 

Для примера

<div class="list" ng-repeat="user in Stores| orderBy:predicate:reverse"> 

My JS имеет следующий

$scope.predicate = 'date'; 
      $scope.reverse = true; 
      $scope.order = function (predicate) { 
       $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; 
       $scope.predicate = predicate; 
      } 

My HTML for sorting date is 

     <div class="col-xs-3 col-lg-3 heading-date headerStyle"> 
      <b class="date-heading" ng-click="order('CreatedDate')">Date</b> 
      <span class="sortorder"                           
      ng-show="predicate === 'CreatedDate'"                             
      ng-class="{reverse:reverse}"></span> 

Я хочу сортировать дату в обратном порядке. Как я могу сортировать дату в Angular js?

+0

В чем проблема? Как выглядят ваши данные? –

ответ

1

app.js

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

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 
app.controller('ExampleController', ['$scope', '$filter', function($scope, $filter) { 
    var orderBy = $filter('orderBy'); 
    $scope.Stores = [ 
    { name: 'John', phone: '555-1212', age: '2011-06-11T00:00:00.000Z' }, 
{ name: 'Mary', phone: '555-9876', age: '2011-06-12T00:00:00.000Z' }, 
{ name: 'Mike', phone: '555-4321', age: '2011-07-13T00:00:00.000Z' }, 
{ name: 'Adam', phone: '555-5678', age: '2011-05-14T00:00:00.000Z' }, 
{ name: 'Julie', phone: '555-8765', age: '2011-06-15T00:00:00.000Z' } 
    ]; 
    $scope.order = function(predicate) { 
    $scope.predicate = predicate; 
    $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; 
    $scope.friends = orderBy($scope.friends, predicate, $scope.reverse); 
    }; 
    $scope.order('age', true); 
}]); 

HTML ЧАСТЬ:

<html ng-app="plunker"> 

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
    <script src="app.js"></script> 
    </head> 
<body ng-controller="ExampleController"> 
    <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre> 
    <table class="friend"> 
     <tr> 
     <th> 
      <button ng-click="order('name')">Name</button> 
      <span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span> 
     </th> 
     <th> 
      <button ng-click="order('phone')">Phone Number</button> 
      <span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span> 
     </th> 
     <th> 
      <button ng-click="order('age')">Age</button> 
      <span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span> 
     </th> 
     </tr> 
     <tr ng-repeat="user in Stores|orderBy:predicate:reverse"> 
     <td>{{user.name}}</td> 
     <td>{{user.phone}}</td> 
     <td>{{user.age | date:'d MMM yyyy'}}</td> 
     </tr> 
    </table> 
</body> 
</html> 

Вот ссылка на plunker: sorting date in reverse order

вы можете хранить даты в ISO 8601 строки, которые, естественно, своего рода и использования Фильтр даты уклона для отображения даты.

Нашел хороший пример vojtajina. Вот для чего это jsfiddle.
http://jsfiddle.net/vojtajina/rvdww/6/

+0

Я хочу знать о порядке сортировки – HarshMakadia

+0

Работы Perfect Thanks! – HarshMakadia

0

Для того, чтобы подобрать дату в angularjs, вы можете использовать orderBy на дату с negation.

Для вашего случая у вас должно быть какое-то свойство даты в объекте пользователя. скажем, это birthdate, то вы можете сортировать в обратном порядке, как это:

<div class="list" ng-repeat="user in Stores| orderBy:'-birthdate'"> 
-1

Это может помочь вам http://jsfiddle.net/m7ynD/

HTML код

<div ng-app> 
    <script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script> 
    <div ng-controller="Main"> 
     <div ng-repeat="(id, i) in items | orderBy:'date'">{{id}}: {{i.date | date}}</div> 
    </div> 
</div> 

JavaScript код

function Main($scope) { 
    $scope.items = { 
     0: {date: new Date('12/23/2013')}, 
     1: {date: new Date('12/23/2011')}, 
     2: {date: new Date('12/23/2010')}, 
     3: {date: new Date('12/23/2015')} 
    }; 
} 
+1

Этот пример не сортирует дату в зависимости от года и месяца – HarshMakadia

Смежные вопросы