Question

我已经使用ng-repeat打印了一些div。在每个div中，我都给出了一个p标记，该标记表示查看更多信息。在单击时，我希望已单击以查看更多信息的特定div显示我已放置在该单击上的数据。但是取而代之的是，所有div都在单击more 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内，因此一次可以同时作用于所有这些对象。但是如果我将视图保留在ng-repeat之外，又如何将其保留在每个div内。

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>

onclick函数不适用于ng-repeat的每个元素

1 个答案: