2015-06-10 4 views
1

Я учусь AngularJS и как упражнение пытается написать сортировку по возрастанию фильтр:AngularJS: Как написать по возрастанию сортировать фильтр

Это мой HTML-файл:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="../Scripts/angular.min.js"></script> 
    <script src="../Scripts/Controllers/app.js"></script> 
</head> 
<body ng-app="myApp"> 
    <ul ng-init="names = ['Peter','Anton','John']"> 
     <li ng-repeat="name in names | sortAscending "> 
      <span>{{name}}</span> 
     </li> 
    </ul> 
</body> 
</html> 

Это мой фильтр:

app.filter("sortAscending", function() { 
    return function (input) { 
     var result = []; 
     for (var i = 0; i < input.length; i++) { 
      if (input[i] > input[i + 1]) { 
       result.push(input[i]); 
      } 
     } 

     return result; 
    } 
}); 

Что-то не так в цикле относительно сравнения значений.

Что я делаю неправильно?

+0

Вы попробовали orderBy? https://docs.angularjs.org/api/ng/filter/orderBy – AGE

ответ

3

три вещи:

  1. Ваш фильтр ничего не возвращает (отсутствующий оператор возврата)

  2. нг-INIT следует использовать только для псевдонимов, это не очень хорошая практика, чтобы объявить переменные в нем. В вашем примере вы должны использовать ng-init, чтобы применить фильтр к вашему массиву, но сам массив должен быть объявлен в контроллере.

  3. Ваш алгоритм сортировки не работает. Чтобы отсортировать простой массив, вы можете просто использовать метод javascript sort().

Вот рабочая plunker с тремя точками исправлен:

http://plnkr.co/edit/Qv9TDonFmpJsnIjx3dff?p=preview

<ul ng-init="sorted_names = (names | sortAscending)"> 
     <li ng-repeat="name in sorted_names "> 
      <span>{{name}}</span> 
     </li> 
</ul> 

Edit: Я думаю, что вы хотели, чтобы это понять, как форма физических упражнений, поэтому только мое решение адреса как вы пытались решить проблему. Как и другие упоминаемые, это правда, что вы можете использовать фильтр orderby, чтобы сделать это проще в конце.

2

Как насчет OrderBy:

<ul ng-init="names = [{name:'Peter'}, {name:'Anton'}, {name: 'John'}]"> 
    <li ng-repeat="name in names | orderBy:'+name' "> 
     <span>{{name}}</span> 
    </li> 
</ul> 

предваряя имя со знаком + означает, восходящие, в качестве альтернативы - означает, по убыванию.

Ссылка: orderBy

Edit: так же, как и другой ответ предполагает, пожалуйста, воздержитесь от использования нг-инициализации для объявления переменных/объектов. как вы можете видеть в документации AngularJS, простой контроллер можно использовать не только для большинства целей, но и более важно для упражнений.