Show Hide in repeater

by Santosh Thakur

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<ul class="procedures" ng-app ng-controller="sample">
  <li ng-repeat="procedure in procedures">
    <h4><a href="#" ng-click="toggle(procedure)">{{procedure.definition}}</a></h4>
    <div class="procedure-details" ng-show="procedure.show">
      <p>Number of patient discharges: {{procedure.discharged}}</p>
    </div>
  </li>
</ul>

CSS

li {
  list-style: none;
  padding: 10px;
}

ul {
  margin: 0;
  padding: 0;
}

JavaScript

function sample($scope) {
  $scope.show = false;
  $scope.procedures = [{
    definition: 'Procedure 1',
    discharged: 23
  }, {
    definition: 'Procedure 2',
    discharged: 2
  }, {
    definition: 'Procedure 3',
    discharged: 356
  }];

  $scope.toggle = function(obj) {
    if (obj.show) {
      obj.show = false;
      return true;
    } else {
      $scope.procedures.forEach(function(item) {
        item.show = false;
      });
      obj.show = true;
    }

  }
}