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

I have an ng-repeat div to dynamically display a set of div tags based on a dynamic list of items, that each have a unique Id , a type and a "title" value which are both strings and I have a click function assigned to each of them. When I want to click on one of these divs , I want to display an separate div associated to that clicked div and I want to do that using an ng-show which at the moment has a condition where the id of this item/div should be equal/equivalent to a scope variable I've defined in a controller associated with the html for this new div to be displayed.

我有一个ng-repeat div来动态显示一组div标签，这些div标签基于一个动态的项目列表，每个都有一个唯一的Id，一个类型和一个“title”值，它们都是字符串，我有一个分配给你的点击功能他们每个人。当我想点击其中一个div时，我想显示一个与该被点击的div相关联的单独div，我想使用ng-show进行此操作，此时此条件具有此item / div的id应该等于/等效于我在与要显示的这个新div的html相关联的控制器中定义的范围变量。

The problem I'm getting is that every one of these separate divs is showing and assuming that all the ng-shows are true which shouldn't be the case and I'm not sure why this is happening as all the id's for the items are unique. I've printed out to the console and can't see anything wrong with the assigning of the variable but not sure if I've missed something with regards to the ng-show condition.

我得到的问题是，这些单独的div中的每一个都显示并假设所有的ng-shows都是真的，这不应该是这种情况而且我不确定为什么会发生这种情况因为项目的所有id都是很独特。我打印到控制台，看不到变量的分配有什么问题，但不确定我是否遗漏了与ng-show条件有关的内容。

Here is what I have so far in html with 2 div examples (don't worry about replicating all the styling, i just want to figure out what is going on with the html/angular stuff):

这是我到目前为止在html中有2个div示例（不要担心复制所有样式，我只是想弄清楚html / angular东西是怎么回事）：

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

And here is the simple click function I have . $scope.displayMessage is defined earlier on during the controller setup where its set to an empty string:

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

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

Let me know if I need to add more code.

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

3 个解决方案

#1

It could be done in a simpler way without adding property to the items varible you have in scope.

它可以以更简单的方式完成，而无需向范围内的变量项添加属性。

Let the Controller be

让控制器成为

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 will be like

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>

Here an array named 'div_' is maintained to trace all ng-show value of all div.

这里维护一个名为'div_'的数组来跟踪所有div的所有ng-show值。

Working plunker https://plnkr.co/edit/uhFdCXkmS4gB95c9bjTR?p=preview

工作人员https://plnkr.co/edit/uhFdCXkmS4gB95c9bjTR?p=preview

#2

This will be easier for you to accomplish if you had properties on each item to key off of.

如果您在每个项目上都有属性来关闭，这将更容易实现。

For example,

例如，

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

This will allow you to add an ng-click to your children items.

这样您就可以在子项目中添加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.........

Right now, there is no good way to for your application to know that any of your children divs have been clicked. There are other ways you can do this, but in my opinion, adding properties that are well defined and straightforward is the best way.

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

#3

if you want to show hide rows under loop

如果要在循环下显示隐藏行

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

#1