Функция onclick не работает независимо для каждого элемента ng-repeat

Question

Я использовал ng-repeat, чтобы распечатать некоторые элементы. В каждом div я дал тег p, который говорит о просмотре. При нажатии на это я хочу, чтобы конкретный div, который был нажат для просмотра, показывает данные, которые я поместил, чтобы показать на этом клике. Но вместо этого все div-ы запускаются вместе при нажатии на любую метку p. Кроме того, в контенте, который будет отображаться при нажатии, у меня есть тег p, который говорит о том, что меньше просмотра, и скрывает этот контент, и он делает то же самое. Как мне заставить их работать независимо?

вот код html и angularjs

<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;
  }
}

Это потому, что я поместил ng-click внутри ng-repeat, и, следовательно, он работает для всех одновременно. Но тогда как бы я держал вид больше внутри каждого элемента div, если бы я держал его вне ng-repeat.

Answer 1

Поскольку ng-repeat создает свою собственную локальную область, вы можете воспользоваться этим, определив переменную, которая является локальной для каждого элемента в вашем ng-repeat.Для этого просто удалите переменную viewMore из контроллера и установите ее значение прямо в представлении.Вот простой пример, иллюстрирующий эту технику.

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>