我想在 ng-repeat 循环中使用 angularjs 制作手风琴,但没有 ui.bootstrap 也没有 jquery
I want to make accordion in ng-repeat loop using angularjs only with no ui.bootstrap and no jquery
我尝试使用下面给出的代码。此代码不会折叠其他代码。它只是让其他面板 open.I 要在单击当前面板时关闭其他面板。不使用 jQuery 和 ui.bootstrap
的任何帮助将不胜感激
<div id="accordion" class="panel-group">
<div ng-repeat="item in awesomeThings" >
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse{{$index+1}}"
ng-click="print($event)" class="nothing" >click</a>
</h4>
</div>
<div id="collapse{{$index+1}}" class="panel-collapse collapse ">
<div class="panel-body">
{{item.item}}
</div>
</div>
</div>
</div>
</div>
和我尝试将折叠的 class 添加到所有控制器部分,然后将 in
class 添加到当前单击的项目并删除折叠的 class 来自当前项目
$scope.print= function($event){
var el= angular.element(document.querySelector('.nothing'));
console.log(el);
el.addClass('collapsed');
angular.element($event.target).removeClass('collapsed');
angular.element($event.target).addClass('in');
}
首先,document.querySelector
returns 只是第一场比赛,但您想获得所有比赛。 querySelectorAll
也不会完成这项工作,因为您将更改其 class
的 <a />
标签作为目标将不会执行任何操作。
如果有的话,您可以更改 .collapse
元素的 class
es - 删除 in
并添加 collapsed
.
<!DOCTYPE html>
<html>
<head>
<title></title>
<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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngapp', []);
app.controller('mainctrl', function($scope) {
$scope.awesomeThings = [{
item: 'heoj'
}, {
item: 'nniothing'
}, {
item: 'skgjs'
}];
$scope.print = function($event) {
var el = angular.element('.panel-collapse');
el.removeClass('in').addClass('collapsed');
angular.element($event.target).removeClass('collapsed');
angular.element($event.target).addClass('in');
}
})
</script>
</head>
<body ng-app="ngapp" ng-controller="mainctrl">
<div id="accordion" class="panel-group">
<div ng-repeat="item in awesomeThings">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index+1}}" ng-click="print($event)" class="nothing">click</a>
</h4>
</div>
<div id="collapse{{$index+1}}" class="panel-collapse collapse ">
<div class="panel-body">
{{item.item}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsbin.com/momuniz/edit?html,output
但是这会隐藏没有动画的展开面板,因为改变 类 是不够的,它应该有时间,这样折叠才会顺利。
要修复它,我们需要 bootstrap 来进行折叠,为此有一个 API:collapse ()
.
所以不要自己删除和添加 class
es,让 bootstrap 用
来完成
el.collapse('hide')
实例
<!DOCTYPE html>
<html>
<head>
<title></title>
<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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngapp', []);
app.controller('mainctrl', function($scope) {
$scope.awesomeThings = [{
item: 'heoj'
}, {
item: 'nniothing'
}, {
item: 'skgjs'
}];
$scope.print = function($event) {
angular.element('.panel-collapse').collapse('hide');
}
})
</script>
</head>
<body ng-app="ngapp" ng-controller="mainctrl">
<div id="accordion" class="panel-group">
<div ng-repeat="item in awesomeThings">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index+1}}" ng-click="print($event)" class="nothing">click</a>
</h4>
</div>
<div id="collapse{{$index+1}}" class="panel-collapse collapse ">
<div class="panel-body">
{{item.item}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsbin.com/nigumad/edit?html,output
顺便说一句,当你使用angular.element
时你不需要querySelector/All
因为你可以直接将选择器传递给angular.element
- angular.element('.nothing')
我尝试使用下面给出的代码。此代码不会折叠其他代码。它只是让其他面板 open.I 要在单击当前面板时关闭其他面板。不使用 jQuery 和 ui.bootstrap
的任何帮助将不胜感激<div id="accordion" class="panel-group">
<div ng-repeat="item in awesomeThings" >
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapse{{$index+1}}"
ng-click="print($event)" class="nothing" >click</a>
</h4>
</div>
<div id="collapse{{$index+1}}" class="panel-collapse collapse ">
<div class="panel-body">
{{item.item}}
</div>
</div>
</div>
</div>
</div>
和我尝试将折叠的 class 添加到所有控制器部分,然后将 in
class 添加到当前单击的项目并删除折叠的 class 来自当前项目
$scope.print= function($event){
var el= angular.element(document.querySelector('.nothing'));
console.log(el);
el.addClass('collapsed');
angular.element($event.target).removeClass('collapsed');
angular.element($event.target).addClass('in');
}
首先,document.querySelector
returns 只是第一场比赛,但您想获得所有比赛。 querySelectorAll
也不会完成这项工作,因为您将更改其 class
的 <a />
标签作为目标将不会执行任何操作。
如果有的话,您可以更改 .collapse
元素的 class
es - 删除 in
并添加 collapsed
.
<!DOCTYPE html>
<html>
<head>
<title></title>
<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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngapp', []);
app.controller('mainctrl', function($scope) {
$scope.awesomeThings = [{
item: 'heoj'
}, {
item: 'nniothing'
}, {
item: 'skgjs'
}];
$scope.print = function($event) {
var el = angular.element('.panel-collapse');
el.removeClass('in').addClass('collapsed');
angular.element($event.target).removeClass('collapsed');
angular.element($event.target).addClass('in');
}
})
</script>
</head>
<body ng-app="ngapp" ng-controller="mainctrl">
<div id="accordion" class="panel-group">
<div ng-repeat="item in awesomeThings">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index+1}}" ng-click="print($event)" class="nothing">click</a>
</h4>
</div>
<div id="collapse{{$index+1}}" class="panel-collapse collapse ">
<div class="panel-body">
{{item.item}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsbin.com/momuniz/edit?html,output
但是这会隐藏没有动画的展开面板,因为改变 类 是不够的,它应该有时间,这样折叠才会顺利。
要修复它,我们需要 bootstrap 来进行折叠,为此有一个 API:collapse ()
.
所以不要自己删除和添加 class
es,让 bootstrap 用
el.collapse('hide')
实例
<!DOCTYPE html>
<html>
<head>
<title></title>
<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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngapp', []);
app.controller('mainctrl', function($scope) {
$scope.awesomeThings = [{
item: 'heoj'
}, {
item: 'nniothing'
}, {
item: 'skgjs'
}];
$scope.print = function($event) {
angular.element('.panel-collapse').collapse('hide');
}
})
</script>
</head>
<body ng-app="ngapp" ng-controller="mainctrl">
<div id="accordion" class="panel-group">
<div ng-repeat="item in awesomeThings">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index+1}}" ng-click="print($event)" class="nothing">click</a>
</h4>
</div>
<div id="collapse{{$index+1}}" class="panel-collapse collapse ">
<div class="panel-body">
{{item.item}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsbin.com/nigumad/edit?html,output
顺便说一句,当你使用angular.element
时你不需要querySelector/All
因为你可以直接将选择器传递给angular.element
- angular.element('.nothing')