如何为 Ng Repeat 指令访问的视图中的每个项目创建查看更多切换

Question

我正在尝试创建一个基本的搜索功能，用户可以在其中搜索课程以及 returns 课程编号和标题。我想要通过点击每门课程旁边的下拉箭头来切换附加信息的选项，但在我当前的实现中，切换仅适用于在 ng-repeat 中访问的 collection 课程中的第一门课程指令，但希望能够 "see more" 每个课程的唯一信息。（尝试在本教程之后对其建模：https://www.silvabokis.com/squarespace-tips/how-to-create-hideshow-faqs-in-squarespace）

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

对正确的代码结构、可用性、and/or 可读性的任何额外修复也表示赞赏！

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>

当您单击课程按钮时，这会将每门课程的属性 showDesc 设置为 true。如果设置为 true，则描述将显示，因为 ng-if。如果再次单击，showDesc 将设置为 false => toggle!

您可以删除toggle_visibility功能！

如何为 Ng Repeat 指令访问的视图中的每个项目创建查看更多切换

How to Create See More Toggle for Each Item in View Accessed by Ng Repeat Directive

javascript

angularjs

angularjs-scope

angularjs-ng-repeat