如何使用$ index切换同一元素中元素的click事件

I am using ng-repeat to display a multidimensional array...

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

So what the code above does is display many lists, and the title of each list is {formblock[0].form_name}. When this title is clicked, I want to toggle the display of each formblock, but I want to keep the title visible.

所以上面的代码显示的是多个列表,每个列表的标题是{formblock [0] .form_name}。单击此标题时,我想切换每个formblock的显示,但我想保持标题可见。

The code above does not work right, when clicked, only a component of formblock is hidden, that is form is hidden. Moreover, it hides it for all lists, where I want the ng-click to only toggle the elements within the same container as the function.

上面的代码不能正常工作,单击时,只隐藏formblock的一个组件,即隐藏表单。此外,它隐藏了所有列表,我希望ng-click只切换与函数相同的容器内的元素。

How can I achieve this?

我怎样才能做到这一点?

this is my controller function for ng-click

这是我用于ng-click的控制器功能

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

1 个解决方案

#1

You can pass the item of the ng-repeat to a function. Eg:

您可以将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);
};

In your specific case:

在您的具体情况:

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

#1