CODEWITHSUNDEEP
javascriptangularjsangularjs-scopeangularjs-ng-repeat
Matt
Matt

Reputation: 463

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

I'm trying to create a basic search feature where a user searches for a course and returns the course number and title. I would like the option to toggle additional information by hitting a drop down arrow next to each course, but in my current implementation the toggling only applies to the first course in the collection of courses accessed in the ng-repeat directive, but would like to be able to "see more" unique information of each individual course. (Trying to model it after this tutorial: https://www.silvabokis.com/squarespace-tips/how-to-create-hideshow-faqs-in-squarespace)

Here is my code: https://next.plnkr.co/edit/qpyvZuvI8vw8q6on?open=lib%2Fscript.js

Any additional fixes towards proper code structure, usability, and/or readability are also appreciated!

Upvotes: 0

Views: 54

Answers (1)

Betty St
Betty St

Reputation: 2860

Instead of using a plain JS function, you can just use Angulars ng-click and ng-if, like this to toggle the description:

<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>

This will set the attribute showDesc to true on each course when you click the course's button. If it is set to true, the Description will show up because of the ng-if. If you click again, showDesc is set to false => toggle!

You can remove the toggle_visibility function!

Upvotes: 1

Related Questions