У меня есть простой аккордеон, использующий bootstrap. Я использую его с тегом ul li с ng repeat in angularjs. Все работает, просто нужно добавить + и - рядом с «Группа сворачиваемого списка» при развертывании и свертывании. Вот код ниже.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <body ng-app="myApp" ng-controller="myCtrl"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse1">Collapsible list group</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <ul> <li ng-repeat="x in records">{{x}}</li> </ul> </div> <div>hello</div
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.records = [ "Alfreds Futterkiste", "Berglunds snabbköp", "Centro comercial Moctezuma", "Ernst Handel", ] });
Пожалуйста, проверьте код ... если вы хотите поместить изображение вместо '+ / -', вы можете заменить '-' и '+' на путь к изображению в разделе Javascript и в html создайте тег и сделать sr c динамический атрибут c
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.collapseStatus = '-'; $scope.records = [ "Alfreds Futterkiste", "Berglunds snabbköp", "Centro comercial Moctezuma", "Ernst Handel", ] $scope.toggleOpen = function() { $scope.collapseStatus = $scope.collapseStatus == '-'? '+': '-'; } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <body ng-app="myApp" ng-controller="myCtrl"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" ng-click="toggleOpen()" href="#collapse1">Collapsible list group {{collapseStatus}}</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <ul> <li ng-repeat="x in records">{{x}}</li> </ul> </div> <div>hello</div>