AngularJS过滤类别

Question

我今天早些时候开始使用AngularJS，我决定构建一个简单的应用程序，该应用程序包含包含项目的类别。

该应用程序的侧边栏列出了类别（ aside.navigation ），主视图列出了所有项目。 我的计划是将所有项目（ $scope.items ）加载到<ul> ，并在用户单击侧边栏中的类别之一时对其进行过滤。

我尝试了几件事，包括带有HTML的简单过滤器和自定义过滤器功能。 但是我就是无法正常工作。 最好的方法是什么？

这是我的HTML

<html ng-app="stash">
    ...
    <body ng-controller="StashCtrl">
        <div id="stash">
            <aside class="navigation">
                <h1 class="logo"><a href="#"><strong>stash</strong>.io</a></h1>
                <ul>
                    <li class="icon-latest active"><a href="#">Latest</a></li>
                    <li class="icon-star"><a href="#">Favorites</a></li>
                </ul>
                <ul>
                    <li ng-repeat="stash in stashes" class="icon-{{stash.icon}}"><a href="#">{{stash.title}}</a></li>
                </ul>
            </aside>

            <section class="content">
                <header>
                    <h1>Inbox <span class="item-count">{{totalItems}}</span></h1>
                </header>
                <ul class="items clearfix">
                    <li ng-repeat="item in items | filter:search">
                        <a ng-if="item.image != ''" href="#" class="has-image" ng-style="{'background-image': 'url({{item.image}})'}">
                            <h2>{{item.title}}</h2>
                        </a>
                        <a ng-if="item.excerpt != ''" href="#">
                            <h2>{{item.title}}</h2>
                            <p>{{item.excerpt}}</p>
                        </a>
                        <a ng-if="item.image == '' && item.excerpt == ''" href="#">
                            <h2>{{item.title}}</h2>
                        </a>
                    </li>
                </ul>
            </section>
        </div>
    </body>
    ...
</html>

还有JavaScript

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

app.controller('StashCtrl', function($scope) {
    $scope.items = [
        {id: '1', stash: '1', title: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit', excerpt: '', image: 'images/portfolio1.jpg'},
        {id: '2', stash: '1', title: 'Lorem ipsum', excerpt: '', image: 'images/portfolio4.jpg'},
        {id: '3', stash: '1', title: 'Lorem ipsum dolor sit amet', excerpt: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, autem, repellat, asperiores, voluptates doloremque eaque suscipit beatae quisquam sint consequuntur illo minus ipsum optio officia alias ex veritatis libero veniam tempora fugit laborum facere vitae doloribus omnis aspernatur corporis rerum ad repudiandae accusamus placeat. Officia, aliquam, laborum sequi minima saepe et voluptatem! Consequuntur maiores veniam laboriosam quaerat quae delectus doloremque rem cumque aspernatur! Tenetur, beatae facere incidunt quae numquam vitae exercitationem quia saepe earum officiis porro asperiores id explicabo sapiente molestiae culpa atque facilis ipsa eligendi nobis quas eaque possimus temporibus nam mollitia distinctio dicta dolores. Expedita, quas aliquid modi!', image: ''},
        {id: '4', stash: '2', title: 'Lorem ipsum', excerpt: '', image: 'images/portfolio2.jpg'},
        {id: '5', stash: '', title: '5', excerpt: '', image: ''}
    ];
    $scope.totalItems = $scope.items.length;

    $scope.stashes = [
        {id: '1', title: 'Ideas', icon: 'lightbulb'},
        {id: '2', title: 'Onefinity Studios', icon: 'company'},
        {id: '3', title: 'OnefinityCMS', icon: 'star'}
    ];
});

Answer 1

最简单的解决方案是将search设置为对象：

$scope.search = {};

并在存储列表中单击更改存储ID：

<a href ng-click="search.stash = stash.id">{{stash.title}}</a>

这是一个工作示例。

如果要激活状态，请使用ng-class并将其放在li ：

<li ng-repeat="stash in stashes" ng-class="{'active': stash.id == search.stash}">...</li>

Answer 2

该过滤器正在通过名为search的属性进行过滤，但该属性不存在。

一种方法是将选定的stash保存到合并范围内的currentStash属性中，然后对其进行筛选...

<li ng-repeat="stash in stashes" class="icon-{{stash.icon}}">
    <a href="#" ng-click="$parent.currentStash = stash">{{stash.title}}</a>
</li>

然后将过滤器更改为...

<li ng-repeat="item in items | filter : { stash: currentStash.id }">

JsBin