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">
      <input type="checkbox" />
      <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.procedures = [{
    definition: 'Procedure 1',
    discharged: 23,
    show:false
  }, {
    definition: 'Procedure 2',
    discharged: 2,
    show:false
  }, {
    definition: 'Procedure 3',
    discharged: 356,
    show:false
  }];
  
  $scope.toggle = function(obj){
  if(obj.show) {
  	obj.show = false; 
    return true;
    } else {
    	$scope.procedures.forEach(function(item){
      	item.show = false;
      });
      obj.show = true;
    }
  
  }
}