尝试通过自举崩溃构建多个手风琴。单击第二个手风琴会使第一个折叠

Question

我正在AngularJS中构建手风琴数据类型。 我的代码可以在基本功能上发挥作用，但是我有一个大问题。

这是代码：

 var app = angular.module('accordions', []); app.controller('MainCtrl', function($scope) { $scope.fieldAccordions = [{ fieldAccordionHeader: 'Header 1', fieldAccordionItems: [{ desc: 'Item 1 - A' }, { desc: 'Item 1 - B' }] }, { fieldAccordionHeader: 'Header 2', fieldAccordionItems: [{ desc: 'Item 2' }] }, { fieldAccordionHeader: 'Header 3', fieldAccordionItems: [{ desc: 'Item 3' }] }]; });

 <!DOCTYPE html> <html ng-app="accordions"> <head> <meta charset="utf-8" /> <title>AngularJS Accordions</title> <link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script> document.write('<base href="' + document.location + '" />'); </script> <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body ng-controller="MainCtrl"> <div class="panel-group" id="accordion"> <div class="panel panel-default" ng-repeat="field in fieldAccordions track by $index"> <div class="panel-heading"> <div class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ $index }}"> {{ field.fieldAccordionHeader }} </a> </div> </div> <div id="collapse{{ $index }}" class="panel-collapse collapse in"> <div class="panel-body"> <div ng-repeat="item in field.fieldAccordionItems track by $index">{{ item.desc }}</div> </div> </div> </div> </div> </body> </html>

在我正在处理的页面上，我需要一个手风琴，然后是其他字段，例如文本，图像，然后是另一个手风琴。 该代码适用于第一手风琴。 当我在页面上再次调用fieldAccordions时，打开其标题将打开初始fieldAccordions元素的标题。

这是我的界面外观：

First fieldAccordions on the page: (I'll just call it fieldAccordions1)
Header 1 for fieldAccordions1 // opens Header 1 for fieldAccordions1
Header 2 for fieldAccordions1 // opens Header 2 for fieldAccordions1
Header 3 for fieldAccordions1 // opens Header 3 for fieldAccordions1


//Text

//Images

Second fieldAccordions on the page: (I'll just call it fieldAccordions2)
Header 1 for fieldAccordions2  // opens Header 1 for fieldAccordions1
Header 2 for fieldAccordions2  // opens Header 2 for fieldAccordions1
Header 3 for fieldAccordions2  // opens Header 3 for fieldAccordions1
Header 4 for fieldAccordions2  // opens Header 4 for fieldAccordions2
// header 4 opens for fieldAccordions2 since fieldAccordions1 does not have a 4th child

谁能帮我这个？ 我认为问题是我使用$ index的方式。 每次生成新的fieldAccordion时，我都需要有一个唯一的ID，但是我被困住了。

Answer 1

 var app = angular.module('accordions', []); app.controller('MainCtrl', function($scope) { $scope.fieldAccordions = [{ fieldAccordionHeader: 'Header 1', collapseToggle: 'one', fieldAccordionItems: [{ desc: 'Item 1 - A' }, { desc: 'Item 1 - B' }] }, { fieldAccordionHeader: 'Header 2', collapseToggle: 'two', fieldAccordionItems: [{ desc: 'Item 2' }] }, { fieldAccordionHeader: 'Header 3', collapseToggle: 'three', fieldAccordionItems: [{ desc: 'Item 3' }] }]; });

 <!DOCTYPE html> <html ng-app="accordions"> <head> <meta charset="utf-8" /> <title>AngularJS Accordions</title> <link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script> document.write('<base href="' + document.location + '" />'); </script> <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body ng-controller="MainCtrl"> <div class="panel-group" id="accordion"> <div class="panel panel-default" ng-repeat="field in fieldAccordions track by $index"> <div class="panel-heading"> <div class="panel-title"> <a data-toggle="collapse" href="#{{field.collapseToggle}}"> {{ field.fieldAccordionHeader }} </a> </div> </div> <div id="{{field.collapseToggle}}" class="panel-collapse collapse in"> <div class="panel-body"> <div ng-repeat="item in field.fieldAccordionItems track by $index">{{ item.desc }}</div> </div> </div> </div> </div> </body> </html>

尝试一下，我相信，折叠，引用等名称存在一些问题。可以肯定的是，最好将其明确命名并分开。

尝试通过自举崩溃构建多个手风琴。单击第二个手风琴会使第一个折叠

问题描述

1 个解决方案

解决方案1
0 2017-10-25 19:27:01

尝试通过自举崩溃构建多个手风琴。 单击第二个手风琴会使第一个折叠

问题描述

1 个解决方案

解决方案1 0 2017-10-25 19:27:01

尝试通过自举崩溃构建多个手风琴。单击第二个手风琴会使第一个折叠

解决方案1
0 2017-10-25 19:27:01