javascript - ng-repeat切换幻灯片，但其他应关闭

我正在为slide toggle使用以下代码，它

<div ng-repeat="item in $ctrl.searchitems track by $index">
    <div class="quickinfo-overlap"> Content here...
        <a class="btn-link" ng-click="$ctrl.quickinfoToggle(item)">quick info</a>
    </div>
</div>

我正在使用ng-repeat，因此它正在显示列表，我希望其他列表应为close或quickinfo false。那我可以吗？

这是控制器代码：

function listingController($scope) {
    var vm = this;
    vm.quickinfo = false;
    vm.quickinfoToggle = function(event) {
        event.quickinfo = !event.quickinfo;
    };
};

最佳答案

HTML：

<div ng-repeat="item in $ctrl.searchitems track by $index">
    <div class="quickinfo-overlap"> Content here...
        <a class="btn-link" ng-click="$ctrl.quickinfoToggle(item,$index)">quick info</a>
    </div>
    <div>
        DIV that needs to be toggled on click
    </div>
</div>

Javascript：

function listingController($scope) {
    var vm = this;
    $scope.toggleList = [];
    for(var i=0;i< $scope.searchitems.length;i++)
        $scope.toggleList[i] = false;

    vm.quickinfoToggle = function(event,index) {
    for(var i=0;i< $scope.toggleList.length;i++)
        $scope.toggleList[i] = false;

    $scope.toggleList[index] = true
        event.quickinfo = !event.quickinfo;
    };
};