CODEWITHSUNDEEP
htmlangularjs
Abhilash
Abhilash

Reputation: 147

onclick Function not working independently for each element of ng-repeat

I have used ng-repeat to print out some divs. In each div I have given a p tag which says view more. On clicking that I want that the particular div that has been clicked for view more shows the data that I have put to be shown on that click. But instead all the divs are triggered together on clickin any view more p tag. Also in the content that will be shown on click I have a p tag that says view less and it hides back that content and that does the same thing. How do I make them work independently?

here is the html and angularjs code

<div ng-repeat="rent in RentSummDtl" class="rentSummCard">
  <div ng-if="rent.property_id == propId">
    <p id="rentSummPropName">{{ rent.month_yr }}</p>
    <p class="rentSummDetl">{{ rent.propertypayamount }}</p>
    <p class="rentSummDetl">{{ rent.calculatedpropertypayamount }}</p>
    <p class="rentSummDetl" ng-click="isShowHide('show')" ng-show="viewMore">View More <i class="fas fa-chevron-down"></i></p>

  <div ng-show="showrentDtl">
    <p class="rentSummDetl">{{ rent.addition }}</p>
    <p class="rentSummDetl">{{ rent.deduction }}</p>
    <p class="rentSummDetl">{{ rent.percentage | number:2 }}</p>
    <p class="rentSummDetl">{{ rent.ad_remark }}</p>
    <p class="rentSummDetl">{{ rent.de_remark }}</p>
    <p ng-click="isShowHide('hide')">View Less <i class="fas fa-chevron-up"></i></p>
  </div>
  </div>
</div>

$scope.showrentDtl = false;
$scope.hiderentDtl = false;
$scope.viewMore = true;
$scope.isShowHide = function (param) {
  if(param == "show"){
    $scope.showrentDtl = true;
    $scope.hiderentDtl = false;
    $scope.viewMore = false;
  }
  else if(param == "hide"){
    $scope.showrentDtl = false;
    $scope.hiderentDtl = true;
    $scope.viewMore = true;
  }
  else{
    $scope.showrentDtl = false;
    $scope.hiderentDtl = false;
  }
}

Is this because I have put the ng-click inside the ng-repeat and hence it works for all of them at a time together. But then how would I keep the view more inside each div if I keep it outside the ng-repeat.

Upvotes: 0

Views: 148

Answers (1)

Lex
Lex

Reputation: 7194

Since ng-repeat creates its own local scope, you can take advantage of this by defining a variable that is local to each item in your ng-repeat. To do this simply remove your viewMore variable from your controller and set its value directly in the view. Here's a simple example to illustrate this technique.

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.items = [];
    for (var i = 1; i <= 5; i++) {
      var item = {
        name: 'Item ' + i,
        details: 'Here are some details for Item ' + i + ' so that we have something to show in the view.'
      }
      $scope.items.push(item);
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="item in items">
    <h3>{{ item.name }}</h3>
    <button ng-click="viewMore = !viewMore">
      <span ng-hide="viewMore">Show</span> 
      <span ng-show="viewMore">Hide</span> 
      Details
    </button>
    <div ng-show="viewMore">
      {{ item.details }} 
      <a ng-click="viewMore = false"
         style="cursor: pointer; color: orange;">[hide]</a>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions