CODEWITHSUNDEEP
javascriptjqueryangularjs
Dan Czarnik
Dan Czarnik

Reputation: 1

Angular show/hide with nested repeats

I have a double repeat going on here, an initial repeat list, and then a second one (for expanding details). What is the best way to show/hide the second repeat ONLY at that index in which clicked at. I have them separated by class name however Angular's Jquery Lite doesn't support the "nextUntil" feature. I'm thinking a ng-class conditional but I don't want based on the Scope (needs to be temp for each expand).

            <tr ng-repeat-start="x in calls track by $index" class="{{x.status}}"  class="{{x.status}}" ng-click="getCallDetails(x,$index)" my-draggable >
            <td><small><i class="fa fa-plus"></i></small></td>
            <td style="text-align:center;"><span class="label label-default stat-context {{x.status}}">{{x.statusdesc}}</span></td>             
            <td>{{x.cust_no}}</td>
            <td>{{x.company}}</td>
            <td>{{x.name}}</td>

            <td>{{x.emp_id}}</td>

            <td>{{x.enterdate}}</td>
        </tr>

        <tr class="callDetails"  ng-class="callDetails"  ng-repeat-end ng-repeat="y in x.callDetails"  >
            <td></td>
            <td colspan="2">{{y.emp_name}}</td>
            <td>{{y.attempt_date}}</td>
            <td colspan="2">{{y.note}}</td>
            <td class="allAtt-stat">{{y.callstatus}}</td>
        </tr>

    </tbody>

my simple angular functions

    $scope.getCalls = function() {
        $http.get("callView.php")
            .success(function(response) {
                                $scope.calls = response;
            });

        };


    $scope.getCallDetails = function(attempt,ind) {

    $http.get("callDetails.php?a=" + attempt.action_id)
    .success(function (response) {   
        attempt.callDetails = response;

    });

};

Upvotes: 0

Views: 86

Answers (1)

Soujanya Divi
Soujanya Divi

Reputation: 97

With nested ng-repeats, $index would refer to the innermost scope. If you want to differentiate between parentindex and childindex, child elements can be accessed using $index while parent elements can be accessed either using $parent.$index or using ng-init, parentindex can be initialised to some value.

First approach:

  <div ng-repeat="item in items">
    <div>{{item.key}}</div>
    <ul  ng-repeat="val in item.value track by $index">
      <li >child index {{$index}} -- parentIndex {{$parent.$index}}</li> 
    </ul>
  </div>

Second approach:

  <div ng-repeat="item in items" ng-init="parentIndex=$index">
    <div>{{item.key}}</div>
    <ul  ng-repeat="val in item.value track by $index">
      <li >child index {{$index}} -- parentIndex {{parentIndex}}</li> 
    </ul>
  </div>

see the demo for reference

Upvotes: 1

Related Questions