如何使用$ index切換同一元素內元素的click事件

Question

我正在使用ng-repeat顯示多維數組...

<div class="form-container" ng-repeat="formblock in forms">
    <div ng-click="showResults($index)" ng-if="repeat == true" class="drop" type="button">{{ formblock[0].form_name }}</div>
    <div ng-hide="results[$index]" class="form-block" ng-repeat="form in formblock">
        <div class="optionWrap">
            <div class="formURL">{{ form.url }}</div>
            <div class="formCount">{{ form.count }}</div>
            <div class="formSubmit">{{ form.submit }}</div>
       </div>
    </div>   
</div>

因此，上面的代碼將顯示許多列表，每個列表的標題為{formblock[0].form_name} 。 單擊此標題后，我想切換每個formblock的顯示，但我想保持標題可見。

上面的代碼無法正常工作，當單擊時，僅隱藏了formblock一個組件，即隱藏了form 。 此外，它對所有列表都隱藏了該列表，在這里我希望ng-click僅切換與該函數位於同一容器內的元素。

我該如何實現？

這是我的ng-click控制器功能

$scope.showResults = function (idx) {
    $scope.results[idx] = !$scope.results[idx];
}

Answer 1

您可以將ng-repeat的項目傳遞給函數。 例如：

<div ng-repeat"item in list">
    <a href ng-click="doSomethingWith( item )">...</a>
</div>

$scope.doSomethingWith = function ( item ) {
    console.log('Fabulous! I received:', item);
};

在您的特定情況下：

<div class="form-container" ng-repeat="formblock in forms">
    <div ng-click="showResults( formblock )" ng-if="repeat == true" class="drop" type="button">{{ formblock[0].form_name }}</div>
    <div ng-hide="! formblock.showResults " class="form-block" ng-repeat="form in formblock">
        ...
    </div>
</div>

$scope.showResults = function ( formBlock ) {
    formBlock.showResults = true;
};