Javascript ng单击以仅影响其所在的图元

我正在使用ng repeat生成一些元素

<div class="form-block" ng-repeat="form in formblock | filter:dateFilter">

    <div ng-click="showResults()" ng-if="repeat == true" class="drop">{{ form.form_name }} <span class="caret"></span></div>

    <div ng-show="results" class="formURL">{{ form.url }}</div>
    <div ng-show="results" class="formCount">{{ form.count }}</div>
    <div ng-show="results" class="formSubmit">{{ form.submit }}</div>

</div>

---

您可以使用$index为项目/容器编制索引，并显示相应的结果：

<div ng-click="showResults($index)" ng-if="repeat == true" class="drop">{{ form.form_name }} <span class="caret"></span></div>
<div ng-show="results[$index]" class="formURL">{{ form.url }}</div>
<div ng-show="results[$index]" class="formCount">{{ form.count }}</div>
<div ng-show="results[$index]" class="formSubmit">{{ form.submit }}</div>

---

ng repeat

为您提供一个特殊变量（除非您已经有标识符）：

$index

使用此选项，您可以在角代码中存储（而不是单个布尔值）对象

$index=>toggleState

：

$scope.hiddenHeroes = {};

$scope.toggleHero = function (idx) {
    $scope.hiddenHeroes[idx] = !$scope.hiddenHeroes[idx];
}

在您的HTML中：

<div ng-repeat="hero in heroes">
  <div class="hero" ng-hide="hiddenHeroes[$index]">
  <h1>
  {{hero}}
  </h1>
  All you want to know about {{hero}}!
  <br />
  </div>
  <a ng-click="toggleHero($index)">Toggle {{hero}}</a>
</div>

{{英雄}}
你想知道的关于{{{英雄}的一切！



$scope.hiddenHeroes = {};

$scope.toggleHero = function (idx) {
    $scope.hiddenHeroes[idx] = !$scope.hiddenHeroes[idx];
}

<div ng-repeat="hero in heroes">
  <div class="hero" ng-hide="hiddenHeroes[$index]">
  <h1>
  {{hero}}
  </h1>
  All you want to know about {{hero}}!
  <br />
  </div>
  <a ng-click="toggleHero($index)">Toggle {{hero}}</a>
</div>