如何在angularJS中将forEach映射到折叠面板
在AngularJS中，可以使用ng-repeat指令来实现类似于forEach的功能，并将其映射到折叠面板。
首先，确保你已经引入了AngularJS的库文件。然后，在你的HTML文件中，创建一个包含折叠面板的容器，例如：
<div ng-app="myApp" ng-controller="myCtrl">
<div class="panel-group" id="accordion">
<div class="panel panel-default" ng-repeat="item in items">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index}}">
{{item.title}}
</a>
</h4>
</div>
<div id="collapse{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
{{item.content}}
</div>
</div>
</div>
</div>
</div>在上面的代码中，ng-repeat指令会遍历一个名为items的数组，并为每个数组元素创建一个折叠面板。item.title和item.content分别代表每个折叠面板的标题和内容。
接下来，在你的AngularJS控制器中，定义一个名为myApp的模块和一个名为myCtrl的控制器，并在控制器中初始化items数组：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items = [
{title: '折叠面板1', content: '折叠面板1的内容'},
{title: '折叠面板2', content: '折叠面板2的内容'},
{title: '折叠面板3', content: '折叠面板3的内容'}
];
});在上面的代码中，我们通过$scope对象将items数组绑定到HTML模板中的ng-repeat指令。
最后，确保你已经引入了Bootstrap的CSS和JavaScript文件，以便使用折叠面板的样式和交互效果。
这样，当你运行应用程序时，你将看到一个包含三个折叠面板的页面。点击每个折叠面板的标题，可以展开或折叠相应的内容。
推荐的腾讯云相关产品和产品介绍链接地址：
相关·内容
我用bootstrap做了一个简单的手风琴。我在angularjs中使用了带有ng重复的ul li标签。一切正常，只需在expand上的‘折叠列表组’旁边添加+和-，collapse.Here是下面的代码。
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/b
浏览 5提问于2020-05-06得票数 0
回答已采纳
1回答
我试图在AngularJs中动态显示链接。
我的Js Fiddle在这里：
由于某些原因，标记不是填充标记中的值，而是来自控制器的属性。
标记
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<ul class="nav navbar-nav navba
浏览 0提问于2017-02-17得票数 1
我想通过多个属性过滤结果。我的代码：
(function () {
'use strict';
angular.
module('myApp', []).
filter('byFeatures', byFeatures).
controller('MyCtrl', MyCtrl);
function byFeatures() {
return function (items, conditions) {
if (Object.getOwnPropertyNames(conditio
浏览 4提问于2017-01-24得票数 1
回答已采纳
我尝试使用下面给出的代码。此代码不会折叠其他代码。它只是让其他面板保持打开状态。我想在单击当前面板时关闭其他面板。无需使用jQuery和ui.bootstrap，任何帮助都将不胜感激
<div id="accordion" class="panel-group">
<div ng-repeat="item in awesomeThings" >
<div class="panel panel-default">
<div class="
浏览 6提问于2020-03-16得票数 2
我的应用程序中只有一个控制器
<div ng-controller="MyCtrl">
All Items:
<ul>
<li ng-repeat="item in items">{{item }} -
<a href="" ng-click="like(item)">like it</a>
</li>
</ul>
Items you liked:
&
浏览 2提问于2014-01-12得票数 2
回答已采纳
1回答
我试图将一个对象数组传递给一个指令，在指令中使用ngRepeat输出已排除的html中传递的项。这本质上是讨论的同一个问题。
我尝试了一些不同的方法，使用了编译和链接函数，但我想我不能把我的注意力集中在范围界定上。petebacondarwin - 建议的解决方案确实有效，但我需要(希望)将数组传递给指令。
这是我的最新版本-
指令
(function() {
"use strict";
function MyDirective() {
return {
restrict: "E",
scope: {
浏览 1提问于2014-11-27得票数 2
回答已采纳
1回答
我的模板中有这样的内容：
<div ng-repeat="item in mainCtrl.items" class="item">
<h4 ng-bind="item.title"><small ng-bind="item.pub_date"><strong></strong></small></h4>
<p ng-bind="item.content"></p>
</div>
it
浏览 2提问于2014-12-05得票数 0
回答已采纳
我用AngularJS做了一个自定义指令，在模板中我在控制器中调用了一个函数，但是它没有工作。
(谢谢你的帮助:)
<div ng-contorller="myCtrl">
<ng-selectbox my-function="myfunction()" items="codes"></ng-selectbox>
</div>
myapp.controller("myCtrl", function($scpoe){
$scope.myfunction= function
浏览 5提问于2015-03-26得票数 2
回答已采纳
我从一个服务中获取数据，所以手风琴的数量是可变的。我使用ng-repeat来动态显示折叠面板。
<div ng-controller = "groupController">
<div ng-repeat = "groups in groupNames">
<div class = "panel-group" id = "accordion">
<div class = "panel panel-default">
<div c
浏览 0提问于2015-06-04得票数 3
如何将ng-model绑定到ng-repeat中的元素？实际上，我希望将数组中的对象绑定到元素，并在输入元素时使用新的ng-model创建新的输入元素。而在这个例子中，所有的ng-model都是相同的。
var myApp = angular.module('app', []);
myApp.controller("MyCtrl",function($scope){
$scope.items = [];
$scope.item = {
phone:""
};
$scope.items.push($
浏览 1提问于2015-07-28得票数 1
3回答
我想按多个属性订购一个项目列表。所以我使用一个数组，我把它绑定到一个变量中。
在我允许用户使用select选择order选项之前，一切都很好。当我的数组有超过一个值时，它会中断.而且它似乎默认为track by $index命令。
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope){
$scope.items = [
{a: "3", b: "First"},
{a: "2", b
浏览 8提问于2017-12-19得票数 0
回答已采纳
我有一个选择框，在这个选择框中，每当用户选择一个目的地时，我就会在span中加载一个新页面，其中的类名为"airlinename“
当我的函数运行时，我加载了那个页面，但它显示的是innerhtml，而不是我加载到该页面中的angularjs。
如何加载页面和post数据？
下面是我的第一个页面代码：
<body ng-app="myApp" ng-controller="myCtrl" ng-init='rcity=[{ "name" : "Moscow", "id" : 1182348.
浏览 0提问于2018-01-01得票数 1
5回答
我试图在我的角度应用程序中包括下面的引导折叠面板。然而，当我点击“展开”，角似乎看到href="#collapseOne"，然后重定向到主页，而不是折叠面板。我的路由看起来是这样的，我认为是otherwise({redirectTo: '/home'});造成了问题。有什么建议吗？
angular.module('App')
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/users', {templat
浏览 2提问于2014-01-29得票数 50
回答已采纳
1回答
使用AngularJS，我试图在表格单元格上实现拖放和拖动。
例如，我想在表格单元格上删除" name“标签，并想要跟踪哪个名称放在哪个单元格上。表单元格通过"row.col”跟踪。名称:xx放在1.2 =第1行。col 2
tableDrop = {Id:1.2, Name:xx},{...},{...}
+-----------+-----------+-----------+
| |Name:xx | |
| | | |
| |
浏览 0提问于2016-01-17得票数 0
这是个菜鸟问题。我正在寻找一种正确的方法来访问嵌套ng-重复指令中的父作用域。这正是我的意思：
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="section in sections">
{{section.Name}}
<div ng-repeat="item in section.Items" ng-init="parent = section">
浏览 2提问于2015-09-24得票数 1
回答已采纳
我试着制作一个表格，其中的每一行都填充了ng-repeat，同时我希望单击每一行都会出现一个可折叠的面板(折叠).But，其中只有一行正在呈现，这是我的代码的链接-- var app = angular.module('ngapp', []);
app.controller('mainctrl', function($scope) {
$scope.awesomeThings = [{
item: 'heoj'
}, {
item: 'nniothing'
}, {
item: '
浏览 22提问于2020-03-18得票数 0
2回答
我正在尝试在ngRepeat中嵌入一些可折叠的面板。这就是我所拥有的：
<div class="panel panel-default" ng-repeat="element in elements">
<div class="panel-heading">
{{element.name}}
<button value="Collapse" ng-click="element.isCollapsed != element.isCollapsed"></button
浏览 0提问于2014-02-18得票数 4
回答已采纳
在对数组中的空字符串进行过滤后，只显示第一次和最后一次重复元素。
我的代码：
var myApp = angular.module('myApp', []);
myApp.controller("myCtrl", function ($scope, $window) {
$scope.items = [
{ name: "item1", color: "green", form: "" },
{ name: "item2", color: "&#
浏览 6提问于2016-01-16得票数 3
回答已采纳
我有这段代码，我希望在我的foreach()循环中包含一个外部的JSON文件，以便显示。 JSON如下所示： "items":[{"title":"ONE","content":"Something-1"},
{"title":"TWO","content":"Something-2"},
{"title":"THREE","content":"Something-3"}] 我有这样的代
浏览 7提问于2019-02-20得票数 1
我很难让我的transcluding指令起作用。我想做以下事情:创建一个输出列表的指令，其中每一项的内容都是由转换的内容定义的。例如：
<op-list items="myItems">
<span class="item">{{item.title}}</span>
</op-list>
因此，我将在op-list的模板中使用ng-repeat，并且必须能够在转换后的内容中访问由ng-repeat创建的作用域。
这就是我到目前为止所做的：
var myApp = angular.module('m
浏览 0提问于2015-07-01得票数 1
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
腾讯云开发者
