AngularJS filtering on categories

StackOverflow https://stackoverflow.com/questions/23184882

  •  06-07-2023
  •  | 
  •  

Вопрос

I started playing with AngularJS earlier today and I decided to build a simple app that consists of categories containing items.

The app has a sidebar where the categories are listed (aside.navigation) and a main view where all the items are listed. My plan was to load all the items ($scope.items) into an <ul> and filter them when a user clicks on one of the categories in the sidebar.

I tried a couple of things, including a simple filter withing the HTML, and a custom filter function. But I just can't get it to work. What would be the best way to do this?

This is my 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>

And the 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'}
    ];
});
Это было полезно?

Решение

The easiest solution would be to set search to an object:

$scope.search = {};

And change the stash id on click in your stash list:

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

Here is a working demo.

If you want an active state just use ng-class and place it on your li:

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

Другие советы

The filter is filtering by a property called search but it doesn't exist.

One way to do this is to save the selected stash into a currentStash property on the scope, then filter by it...

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

And then change the filter to...

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

JsBin

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top