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就在这里。谢谢

Answer 1

由于category.name属性，它无法正常工作。在categoriesService.js您返回的集合name等于All。但是，如果您查看EdgesService文件，您会发现没有“全部”这样的选项。因此，在script.js文件（在您的过滤器中）

中进行此比较

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

当filterby.category.name等于＆＃39;全部＆＃39;时，

将始终返回false。

修复它的方法是将其更改为：

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

如果＆＃39;全部＆＃39;这样它将始终返回true。选择了类别。

此后，课程中也将引入等级选项。您可以在此处浏览该项目的代码：https://github.com/Remchi/sw-front

希望有所帮助。：）

AngularJS无法获得类别＆＃34;所有＆＃34;过滤时

1 个答案: