我正在使用 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
切换同一容器内的元素,而不是切换所有元素。
简而言之,我只想让点击事件影响调用该函数的同一容器中的元素,我该怎么做?
这是我 Controller 中的showResults
...
$scope.showResults = function(){
return ($scope.results ? $scope.results=false : $scope.results=true)
}
最佳答案
ng-repeat
为您提供一个特殊变量(除非您已经有一个标识符):$index
。
使用它,您可以在 Angular 代码中存储(而不是单个 bool 值)对象 $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>
关于javascript - ng-click 只影响它所在的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39215141/