如何使用 ng-show 在 ng-repeat 中显示特定的 div？

Question

我有一个 ng-repeat div 可以根据动态项目列表动态显示一组 div 标签，每个标签都有一个唯一的 Id ，一个类型和一个 "title" 值，它们都是字符串，我为每个字符串分配了一个点击函数。当我想点击其中一个 divs 时，我想显示一个单独的 div 与点击的 div 相关联，我想使用 ng-show 来做到这一点moment 有一个条件，这个 item/div 的 id 应该是 equal/equivalent 我在与 html 关联的控制器中定义的范围变量，用于显示这个新的 div。

我遇到的问题是，这些单独的 div 中的每一个都在显示并假设所有 ng-shows 都是真实的，但事实并非如此，我不确定为什么发生这种情况是因为项目的所有 ID 都是唯一的。我已经打印到控制台，看不到变量分配有任何问题，但不确定我是否遗漏了有关 ng-show 条件的内容。

这是我目前在 html 中的 2 个 div 示例（不用担心复制所有样式，我只是想弄清楚 [= =25=]东西）：

<div class="col-md-12 col-sm-12 col-xs-12  " ng-repeat="item in items track by item.id"  ng-click="onClick(item.id)">

  //first type div that is clickable
  <div class="row">
    <div>
      <header class="text">
        <h1 data-ng-if="item.title" ng-bind-html="item.title"></h1>
      </header>
    </div>
  </div>

  //div to be displayed after associated first div type is clicked 
  <div class=" col-sm-11 row"  ng-show="displayMessage===item.id"   >
      <header class="col-sm-12 text">
          <h1  data-ng-if="item.title" ng-bind-html="item.title"></h1>
      </header>
      <p class="col-sm-12" > text about {{item.id]} </p>
  </div>

  //2nd type of  div 
  <div class="row"  style=" background: linear-gradient(135deg, #156570, #1e9d8b);">
      <h1 data-ng-if="item.title" ng-bind-html="item.title"></h1>
      <i class="ms-icon ms-icon-heart-rate"></i>
      <div class="clearfix"></div>
  </div>

  //div to be displayed after associated second div is clicked 
  <div class="col-md-11 col-sm-11 col-xs-11"  ng-show="displayMessage===item.id">

    <div style="background: linear-gradient(135deg, #156570, #1e9d8b);"></div>

    <h1 class="col-sm-12 col-xs-12"  data-ng-if="item.title" ng-bind-html="item.title" style="color:#000"></h1>

    <p class="col-sm-12 col-xs-12 "> text associated with {{item.id}}
    </p>

  </div>

</div>

这是我拥有的简单点击功能。 $scope.displayMessage 是在控制器设置期间定义的，它设置为空字符串：

$scope.onClick = function (itemId) {
    $scope.displayMessage = itemId;
}

如果我需要添加更多代码，请告诉我。

Answer 1

如果您在每个项目上都有属性要关闭，这对您来说会更容易完成。

例如，

$scope.items = [
  {
    id: 1,
    title: "first item",
    isFirstDivSelected: false,
    isSecondDivSelected: false
   },
  {
    id: 2,
    title: "second item",
    isFirstDivSelected: false,
    isSecondDivSelected: false
   }
  {
    id: 3,
    title: "third item",
    isFirstDivSelected: false,
    isSecondDivSelected: false
   }
];

这将允许您向您的子项添加 ng-click。

<div class="col-md-12 col-sm-12 col-xs-12  " ng-repeat="item in items track by item.id"  ng-click="onClick(item.id)">

  //first type div that is clickable
  <div class="row" ng-click="item.isFirstDivSelected = true;">
    <div>
      <header class="text">
        <h1 data-ng-if="item.title" ng-bind-html="item.title"></h1>
      </header>
    </div>
  </div>

  //div to be displayed after associated first div is clicked 
  <div class=" col-sm-11 row"  ng-show="item.isFirstDivSelected"   >
      <header class="col-sm-12 text">
          <h1  data-ng-if="item.title" ng-bind-html="item.title"></h1>
      </header>
      <p class="col-sm-12" > text about {{item.id]} </p>
  </div>
  
   //more divs.........

现在，没有好的方法可以让您的应用程序知道您的任何子 div 已被单击。还有其他方法可以做到这一点，但在我看来，添加定义明确且简单明了的属性是最好的方法。

Answer 2

可以通过更简单的方式完成，而无需将属性添加到范围内的 items 变量。

让控制器成为

app.controller('MainCtrl', function($scope) {
  $scope.div_=[]; 

  $scope.items = [
  {
    id: 1,
    title: "first item"
   },
  {
    id: 2,
    title: "second item",
   },
  {
    id: 3,
    title: "third item",
   }
];

  $scope.onClick=function(index,row){
     $scope.div_[index+'_'+row]=true;
   }
  });

HTML 会像

<body ng-controller="MainCtrl">
    <div ng-repeat="item in items">
    <div style="color:red" ng-click="onClick($index,0)">DIV {{$index}}.0---click to show DIV {{$index}}.0_CHILD</div>
    <div style="color:blue" ng-show="div_[$index+'_0']">DIV {{$index}}.0_CLILD</div>
    <br>
    <div style="color:red" ng-click="onClick($index,1)">DIV {{$index}}.1---click to show DIV {{$index}}.1_CHILD</div>
    <div style="color:blue" ng-show="div_[$index+'_1']">DIV {{$index}}.1_CLILD</div>
    <hr>
    </div>
  </body>

这里维护了一个名为 'div_' 的数组来跟踪所有 div.

的所有 ng-show 值

工作的 plunker https://plnkr.co/edit/uhFdCXkmS4gB95c9bjTR?p=preview

Answer 3

如果你想在循环下显示隐藏行

<div *ngFor="let client_obj of dashboard_data.data.items ;let i = index"    >
      <input type="checkbox"   [(ngModel)]="div_['level_1_'+i]">
          <div [class.hide]="div_['level_1_'+i]"   >
             {{client_obj.value}}
        </div>
 </div>

如何使用 ng-show 在 ng-repeat 中显示特定的 div？

how to use ng-show to display specific divs inside an ng-repeat?

html

javascript

angularjs

angularjs-ng-repeat

ng-show