我今天早些时候开始使用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'}
    ];
});

===============>>#1 票数: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>

===============>>#2 票数:0

该过滤器正在通过名为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

  ask by Cas Cornelissen translate from so

未解决问题?本站智能推荐:

1回复

angularjs中的双重过滤

我正在过滤链上,遇到解决方案的麻烦。 首先,我使用search.input模型进行过滤,这很简单而且有效。 我做了一个下拉菜单来进一步过滤结果。 例如。 我输入“ US”,它将在address属性中显示所有使用US的用户。 然后,我选择“专业级别”下拉列表以进一步过滤它,例如仅筛选具有
2回复

AngularJS和过滤器

我有一本字典: 我如何使用angularjs按值过滤此数据? 我需要得到这个(仅对):
2回复

AngularJS动态过滤

假设我有模型: 哪个被迭代: 并有一个带有过滤器模型的输入框: 当我输入“ test”时,它会显示两条记录。 但是,我需要动态选择将用于搜索的初始对象的属性。 因此,我有三个复选框(在实际项目中,我有更多组合选项): 在我的控制器中: 这根本不显示
1回复

angularjs中的多个过滤器

在过去的9个小时中,我尝试解决这个问题,阅读了多个问题以及有关角度的文档,但是我还没有找到解决方案。 文本字段可以正常工作,而选择字段仅按字母顺序显示每个字段。...但是, 当我在选择字段中选择内容时,所有内容将从表中删除。 我必须重新加载页面才能取回物品... 如果选择“宜家”,
2回复

AngularJS不过滤产品列表

我在AngularJS过滤我的产品列表时遇到问题。 我对我的变量做了一些console.log查询,看起来都很好。 问题是视图不会更新以显示已过滤的产品。 当您在输入框中输入搜索文本时,过滤工作完全正常, 但在单击“类别”菜单项时它不起作用。 我想在用户点击菜单项时按类别过滤产品
2回复

AngularJS过滤空字符串

我在select和list之间设置了一个简单的Angular过滤器。 当用户从下拉列表中选择项目时,列表会更新以显示匹配结果。 问题是我在下拉列表中首先有一个“选择...”选项,没有值,当这是选定值时,显示所有项目。 我认为这是有道理的,但我想要相反。 如果所选选项没有值,我不想显示列表
1回复

使用angularjs过滤搜索结果

我正在尝试使用angularjs构建搜索页面。 我需要提供一些字段(复选框,广播,年龄范围等)作为搜索结果的过滤器。 对于这个演示,我只关注复选框。 我在下面的plunker列表中给出了一个演示代码 http://plnkr.co/edit/PMQQzf63uy8Pzq4fVIYQ?
2回复

AngularJs-仅按自定义过滤器中的某些字段过滤对象

我正在研究这个Codepen 。 数据来自对象数组,我只需要按名称和数量进行过滤。 我有这段代码,但是如果您在搜索框中键入一个字符,它将仅按数量搜索,而不按名称搜索。 换句话说,如果您输入“ warren ”或“ 37.47 ”,它必须返回相同的结果,但不起作用。
1回复

嵌套ng-repeats中的AngularJS过滤器

我有2个嵌套的ng-repeats来填充类别列表和这些类别下的项目。 我正在尝试实现搜索过滤器,以便: 如果项目的标题包含搜索过滤器的字符串,则应显示该项目及其类别。 如果类别名称包含搜索过滤器的字符串,则应显示此类别。 如果此类别下的所有项目均不符合过滤条件,则应显示该类
1回复

过滤由ng-repeat(AngularJS)创建的不同列表

我有两个由ng-repeat创建的具有不同列表的选项卡 当我过滤第二个选项卡时-一切正常,但第一个根本不工作。 我现在<ul search-list=".letter" model="search.district">问题是由于<ul search-list=".l