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

Question

我正在尝试创建一个基本的搜索功能，用户可以在其中搜索类(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

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

Answer 1

您可以使用 Angulars ng-click 和 ng-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功能!