NG單擊隻影響它的內部

Question

我使用NG-重複生成一些元素的元素...

<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切換同一容器內的元素，而不是切換所有元素。

簡而言之，我只希望點擊事件影響調用函數的同一個容器中的元素，我該怎麼做？

這是在我的控制器showResults ...

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

Answer 1

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!

Answer 2

您可以使用$索引索引項/容器，並顯示相應的結果：

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