Ng-repeat and directive expand one list item at a time

Question

I have an ng-repeat code with expandable list items. I would like to expand one item at a time.

The way I am trying to do it is in the html file

<div data-ng-repeat="parts in data track by $index">
    <li id="titleHelp" ng-click='setItem($index);">

and in the directive in the setItem function I want to collapse the previously expanded item and expand the new one. Is it possible to access one repeat element in the directive using index?

thanks!

johan · Accepted Answer · 2016-07-15T10:23:46.713

2

How do you currently expand the list item? What I would do is set a variable as soon as an item is clicked and in your repeated list do a

<div data-ng-repeat="parts in data track by $index">
    <li id="titleHelp" ng-click='setItem($index);">
    <div ng-show="$index = selected_item"> <!-- contents --></div>

In your setItem function:

$scope.setItem = function(i) {
    $scope.selected_item = i;
}

edited Jul 15 '16 at 10:23

answered Jul 15 '16 at 10:13

johan

998
6
20

There's a syntax error in your response; in the HTML, you should have `ng-show="$index == selected_item"` – Daniel Allen Sep 07 '18 at 11:42

score 1 · Answer 2 · answered Jul 15 '16 at 10:15

Declare a object

$scope.obj={selected:null};

After that add a method in the ng repeat,

 $scope.isHide = function (id) {

                            if (id == $scope.obj.selected)
                                return $scope.obj.selected = "all";

                            return $scope.obj.selected = id;
                        }

If you want to hide div, call this method with the id. Do the same thing for the li if you need.

Ng-repeat and directive expand one list item at a time

2 Answers2