如何在angularjs中将+和-添加到引导折叠中



我有一个使用bootstrap的简单手风琴。我将它与angularjs中的ul li标签和ng repeat一起使用。每件事都在起作用,只需在展开和折叠时在"可折叠列表组"旁边添加+和-即可。这是下面的代码。

html

<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中用图像路径替换"-"one_answers"+",创建一个标签并使src属性动态

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>

最新更新