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>

Here is a working demo.

如果您想要一个有效状态，只需使用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

AngularJS过滤类别

2 个答案: