AngularJS can not get category «Все» при фильтрации

Question

Я начал играть с угловым, и я пытаюсь написать простое приложение, состоящее из категорий, содержащих элементы. (Я пытаюсь реализовать учебник для своих нужд)

Теперь я пытаюсь добавить фильтр, чтобы выбирать элементы по категориям. Я могу отфильтровать их, если не выбрать все категории. Я не могу получить все категории. У меня есть края услуги:

angular.module('swFrontApp') 
    .controller('EdgesController', function ($scope, edges,categories) { 
    $scope.edges = edges.query(); 
    $scope.categories = categories.query(); 

    $scope.filterBy = { 
     search: '', 
     category: $scope.categories[0] 
    }; 


    var selectedEdge = null; 

    $scope.selectEdge = function(edge) { 
     selectedEdge = (selectedEdge === edge) ? null : edge; 
    }; 

    $scope.isSelected = function(edge) { 
     return edge === selectedEdge; 
    }; 
    $scope.displayRequirements = function(reqs) { 
     var result = ''; 

     for (var i = 0; i < reqs.length; i ++) { 
      if (result !== '') { result += ', '} 
      if (reqs[i].name) { 
       result += reqs[i].name+ ' '; 
      } 
      result += reqs[i].value; 
     } 
     return result; 
    }; 
    }); 

и я стараюсь фильтровать их с помощью:

angular.module('swFrontApp').filter('edges', function() { 
    return function(edges, filterBy) { 
     return edges.filter(function(element, index, array) { 
      return element.category.name === filterBy.category.name; 
     }); 
    }; 
}); 

Вот мой HTML, чтобы края с категориями фильтра

<select 
      name="category" 
      ng-model="filterBy.category" 
      ng-options="c.name for c in categories" 
      class="form-control"></select> 
    <ul> 
     <li ng-repeat-start="edge in edges | filter:{name: filterBy.search}| edges: filterBy " ng-click="selectEdge(edge)"> 
      <span class="label label-default">{{ edge.category.name }}</span> 
      {{edge.name}} 
      <span class="text-muted">({{ displayRequirements(edge.requirements) }})</span> 
     </li> 
     <li ng-repeat-end ng-show="isSelected(edge)"> 
      {{edge.description}} 
     </li> 
    </ul> 

Я образовал Мои Plunker link является Вот. Thanks

Answer 1

Это не работает из-за атрибута category.name. В вашем categoriesService.js вы возвращаете коллекцию, где name равно All. Но если вы посмотрите в файл EdgesService, вы увидите, что такой опции не существует, как «Все». Таким образом, это сравнение в script.js файле (в фильтре)

return element.category.name === filterBy.category.name; 

всегда возвращает ложь, когда filterby.category.name равен «Все».

Путь, чтобы исправить это, чтобы изменить его на что-то вроде этого:

return element.category.name === filterBy.category.name || filterBy.category.name === 'All'; 

Таким образом, он всегда будет возвращать true, если выбрано «Все» категории.

Также будет введена также опция рангового курса. Вы можете просмотреть код для этого проекта здесь: https://github.com/Remchi/sw-front

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