Issue
I have a simple accordion using bootstrap. I am using it with ul li tag with ng repeat in angularjs. Every thing is working only just need to add + and - beside 'Collapsible list group' on expand and collapse.Here is the code below.
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
script
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
});
Solution
Please check code... if you want to put an image instead of '+ / -' you can replace '-' and '+' with image path in Javascript section and in html create a tag and make src attribute dynamic
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>Answered By - Deepu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.