单击以单击以仅影响其内部元素

时间:2016-08-29 21:01:24

标签: javascript angularjs

我正在使用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>

如您所见,ng-click="showResults()"切换其他元素的显示。问题是,我只希望ng-click切换同一容器内的元素,而不是切换所有元素。

简而言之,我只希望click事件影响调用函数的同一容器中的元素,我该怎么做?

这是我的控制器中的showResults ...

$scope.showResults = function(){
  return ($scope.results ? $scope.results=false : $scope.results=true)
}

2 个答案:

答案 0 :(得分:2)

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>

See it live on jsfiddle.net!

答案 1 :(得分:0)

您可以使用$ 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>

你的功能

$scope.showResults = function(index){
  return ($scope.results[index] ? $scope.results[index]=false : $scope.results[index]=true)
}