Question

我使用bootstrap插件来折叠和展开<div>。我可以为个人<div>执行此操作但如果我将<div>展开并collapseAll()，则展开的<div>只会折叠。请给我一个解决方案

HTML：

<body ng-controller="MainCtrl">
    <div class="panel panel-default" ng-repeat="item in items">
        <div class="panel-heading" ng-click="isCollapsed = !isCollapsed">{{item.title}}</div>
        <div class="panel-body" collapse="isCollapsed">{{item.content}}</div>
    </div>
    <div>
        <input type="checkbox" id="collapse_all_cards" ng-model="isCollapsed"><label for="collapse_all_cards">Collapse All</label>
    </div>
</body>

JS：

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
    $scope.items = [{'title':'Item1','content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus orci sodales, pellentesque urna eu'},
                {'title':'Item2','content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus orci sodales, pellentesque urna eu'},

                 {'title':'Item3','content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus orci sodales, pellentesque urna eu'}

            ]
});

link：http://plnkr.co/edit/mcnqeLJcTyaAuTI9JHb9

Answer 1

请参阅此Plunk

很确定这是你所追求的行为：）

之前的问题是同样的＆＃34; isCollapsed＆＃34;范围内的财产被用于＆＃34;崩溃所有＆＃34;并且个人崩溃，所以他们互相绊倒。

查看具有单独布尔值的新控制器代码＆＃34; isCollapsed＆＃34;集合中每个项目的属性：

{'title':'Item1','content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus orci sodales, pellentesque urna eu', isCollapsed: true}

如果您需要对代码进行任何改进，请询问：）

角度崩溃都不起作用

1 个答案: