草庐IT

javascript - ng-repeat:在点击时显示一个项目并隐藏其他项目

coder 2025-03-25 原文

我有一个 ng-repeat，它显示 div 列表，当我点击其中一个时，它会为点击的项目显示一个附加的 div。

这是有效的

<div ng-repeat="item in items">

    <div ng-click="showfull = !showfull">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <div ng-show="showfull">
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>

我的项目是从一个包含项目列表的 json 加载的，每个项目在这个 json 中都有一个默认属性 showfull 设置为 false。这是有效的，但现在我想在单击某个项目时隐藏列表中的所有其他项目。我尝试过这样的事情:

这不起作用

<div ng-repeat="item in items">

    <div ng-click="expand(item)">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <div ng-show="showfull">
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>

在 Controller 中我添加了一个函数:

$scope.expand = function(e) {
    e.showfull = !e.showfull;
    //TODO: put here a foreach logic to hide all other items
}

但即使没有 foreach 逻辑，这也行不通，单击该项目时不会显示附加的 div。我有两个问题:

  1. 我想这是由于 item 在 expand 函数中“通过复制传递”或某种范围隔离问题，但你能解释一下原因吗详细 ？ 已解决

  2. 当我单击一个项目并显示该项目的附加内容时，如何隐藏其他项目的所有附加 div？我需要做一个指令吗？ 未解决

谢谢

最佳答案

我认为您走在正确的轨道上。您需要在项目上设置 showfull ，然后使用 ng-show 或 ng-if 隐藏它，或者如 Gavin 所述，使用一个类(class)。

在 ng-click 上，您可以调用您的 expand 函数，在其中传递项目、切换它并将所有其他项目设置为隐藏。

模板:

<div ng-repeat="item in items>
    <div ng-click="expand(item)">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <div ng-show="item.showfull">
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>

Controller :

$scope.expand = function (item) {
    angular.forEach($scope.items, function (currentItem) {
        currentItem.showfull = currentItem === item && !currentItem.showfull;
    });
};

关于javascript - ng-repeat:在点击时显示一个项目并隐藏其他项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26408379/

时显javascriptcodeltgtangularjsng-repeatangularjs-ng-show

有关javascript - ng-repeat:在点击时显示一个项目并隐藏其他项目的更多相关文章

  1. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  2. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  3. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  4. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  5. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  6. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  7. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  8. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  9. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  10. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

随机推荐