基于类别的AngularJS过滤_Angularjs_Filtering

基于类别的AngularJS过滤

angularjs

基于类别的AngularJS过滤,angularjs,filtering,Angularjs,Filtering,今天早些时候我开始玩AngularJS，我决定构建一个简单的应用程序，由包含项目的类别组成该应用程序有一个侧边栏，其中列出了类别（aside.navigation），还有一个主视图，其中列出了所有项目。我的计划是将所有项目（$scope.items）加载到中，并在用户单击侧边栏中的一个类别时对其进行过滤我尝试了几件事，包括一个使用HTML的简单过滤器和一个自定义过滤器函数。但我就是不能让它工作。最好的方法是什么这是我的HTML <html ng-app="stash">

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

该应用程序有一个侧边栏，其中列出了类别（

aside.navigation

），还有一个主视图，其中列出了所有项目。我的计划是将所有项目（

$scope.items

）加载到

中，并在用户单击侧边栏中的一个类别时对其进行过滤

我尝试了几件事，包括一个使用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>

最简单的解决方案是将

search

设置为对象：

$scope.search = {};

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

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

筛选器正在按名为“搜索”的属性进行筛选，但该属性不存在

一种方法是将选定的

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 }">

这正是我需要的！但我现在确实觉得自己非常愚蠢；当我以这种方式尝试时，我将

ng单击添加到li
，而不是a
。。。我真丢脸。li
也应该可以，你的问题更可能是href=“#”
。顺便问一下，这个方法是否可以与单独的筛选函数一起使用？因为我想在li
中添加一个.active
类。这是一个很好的解决方案！不幸的是，我还希望能够添加.active类，例如“最新”和“收藏夹”。那它还能用吗？也许我以后需要自定义函数还有另一个原因。将此代码更改为使用自定义函数是否困难？这只是一些额外的工作。看一看。如果你有问题，我想最好再问一个问题。
<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 }">