javascript - 如何为 Ng Repeat 指令访问的 View 中的每个项目创建“查看更多”切换

标签 javascript angularjs angularjs-scope angularjs-ng-repeat

我正在尝试创建一个基本的搜索功能,用户可以在其中搜索类(class)并返回类(class)编号和标题。我希望选择通过点击每个类(class)旁边的下拉箭头来切换附加信息,但在我当前的实现中,切换仅适用于 ng-repeat 指令中访问的类(class)集合中的第一门类(class),但我想能够“查看更多”每门类(class)的独特信息。 (尝试在本教程之后对其进行建模:https://www.silvabokis.com/squarespace-tips/how-to-create-hideshow-faqs-in-squarespace)

这是我的代码:https://next.plnkr.co/edit/qpyvZuvI8vw8q6on?open=lib%2Fscript.js

任何针对正确代码结构、可用性和/或可读性的其他修复也将受到赞赏!

最佳答案

您可以使用 Angulars ng-clickng-if,而不是使用普通的 JS 函数,如下所示来切换描述:

<ul>
  <li class="angular-with-newlines" ng-repeat="course in courses | filter:searchText"> 
    {{course.course_number}}: {{course.title}}
    <button ng-click="course.showDesc=!course.showDesc">See More</button> 
    <div ng-if="course.showDesc"> Description: {{course.description}} </div>
  </li>
</ul>

当您单击类(class)的按钮时,这会将每个类(class)的 showDesc 属性设置为 true。如果设置为 true,则由于 ng-if 的原因,将会显示说明。如果再次单击,showDesc 将设置为 false => 切换!

您可以删除toggle_visibility功能!

关于javascript - 如何为 Ng Repeat 指令访问的 View 中的每个项目创建“查看更多”切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50977953/

相关文章:

javascript - 无法在 'atob' 上执行 'Window'

javascript - 无法让 ng-hide 和 ng-show 工作

javascript - 无法读取未定义错误的属性 'push'?

javascript 如何定义内部函数

javascript - Angular 2库配置

angularjs - 如何将 MEAN Stack 部署到 Web 主机

javascript - 从 ng-repeat 获取点击的项目

javascript - 在 Angular JS 中点击添加 div 内容

javascript - 如何更新 AngularJS 中多个 Controller 共享服务属性的异步模型更改的绑定(bind)?

javascript - 从 json 中删除 "checked"