Question

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

Answer 1

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

Answer 2

在使用for line in diff: print(line)循环显示项目时，请设置ng-repeat：

ng-show

当然<div class="quickinfo slide-toggle" ng-show="quickinfo == 1" ng-cloak> Content here .... </div> <a class="btn-link" ng-click="quickinfo = 1">quick info</a>不是固定数字，它应该对每个项目都是唯一的，例如项目的索引或ID。
我们的想法是，点击您分配的已点击商品ID的1链接未将quickinfo分配给true\false，并在quickinfo中检查当前的ID是否已分配到ng-show与此项目ID（或索引）相同。
当然可以更改变量名称。

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

2 个答案: