2016-02-09 4 views
2

Я использую смарт-таблицу для представления моих данных (которые загружаются через json-файлы через% http.get) в представлении в моем приложении.Фильтр Angularjs int не сортируется правильно в смарт-таблице

в контроллере для представления Я создал фильтр, так как возвращаемые данные из json содержат в нем номера, которые возвращаются как строка типа данных. Фильтр пытается вернуть числа в виде типа данных INT, чтобы функция сортировки смарт-таблицы упорядочивала их правильно.

Однако, независимо от того, что я пытаюсь сортировать в смарт-таблице, по-прежнему сортировать значения как тип данных String.

Моя точка зрения, которая называется Interfaces.html:

<div ng-controller="interfaceController"> 
    <div class="container"> 
     <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped" ng-show="displayedCollection"> 
      <thead> 
       <tr> 
        <th st-sort="Name">Interface</th> 
        <th st-sort="Disabled">Disabled</th> 
        <th st-sort="Online">Online</th> 
        <th st-sort="Failed">Failed</th> 
        <th st-sort="Error">Error</th> 
        <th st-sort="Overdue">Overdue</th> 
       </tr> 
       <tr> 
        <th colspan="4"><input st-search="" class="form-control" placeholder="global search...." type="text"/></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="row in displayedCollection"> 
        <td>{{row.Name}}</td> 
        <td>{{row.Disabled | convertInt | number}}</td> 
        <td>{{row.Online}}</td> 
        <td>{{row.Failed}}</td> 
        <td>{{row.Error}}</td> 
        <td>{{row.Overdue}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

Мой контроллер, который называется interfaceController.js

app.controller('interfaceController',['$scope','$http', function($scope,$http){ 

    $http.get('app/data/InterfacesAuto.json').success(function(data,status,headers,config){ 
     $scope.rowCollection = data; 

     $scope.displayedCollection = [].concat($scope.rowCollection); 
    }); 

}]); 

// Filter takes a value from the table and returns it as an INT 
app.filter('convertInt',function(){ 
    return function (input) { 
     this.parseInt = parseInt; 
     return (parseInt(input,10)); 
    }; 
}); 

JSon который я загрузки

[ 
{"Name":"First","Disabled":"2","Online":"5","Failed":"1","Error":"0","Overdue":"2"}, 
{"Name":"Second","Disabled":"163","Online":"426","Failed":"7","Error":"0","Overdue":"195"}, 
{"Name":"Third","Disabled":"0","Online":"1","Failed":"0","Error":"0","Overdue":"0"} 
] 

Im очень новый для angularjs и веб-дизайн, поэтому заблаговременно за вашу помощь.

Приветствия

ответ

1

Вам нужно изменить тип данных в контроллере. Фильтр используется для форматирования данных для отображения пользователю.

Может быть, вы можете преобразовать строку в целое сразу после того, данные от сервера получен (я использовал JQuery):

$(data).each(function(index, element) { 
      element.Disabled = parseInt(element.Disabled); 
     }); 

Fiddle: http://jsfiddle.net/HB7LU/23575/

Я использовал фильтр, чтобы заказать по атрибуту «Отключено».

Также неплохо иметь эту логику (вызов ajax и обработку данных) в угловой службе.

Надеюсь, это поможет.

+0

Эй, Хуан, это сработало, прежде всего, спасибо. Как я уже сказал, я новичок в Angularjs, я пока не получаю услуги, но буду смотреть на это приветствия. Есть ли способ, который вместо указания конкретного поля, например element.disabled, я мог бы сделать .each пройти все элементы? или это будет услуга? – larsheavy

+0

Да, обязательно: http://codepen.io/armellajuan/pen/KVrLKL Сделайте .each в массиве, а затем в объекте. Но я думаю, что эта логика должна быть в бэкэнде, может быть? –