Question

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

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

这是我到目前为止在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>

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

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

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

Answer 1

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

让控制器

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>

这里有一个名为＆＃39; div _＆＃39;的数组。维护以跟踪所有div的所有ng-show值。

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

Answer 2

如果您要锁定每个项目的属性，这将更容易完成。

例如，

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

如果要在循环

下显示隐藏行

ForeignKey's

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

3 个答案: