gpt4 book ai didi

javascript - AngularUI Accordion 菜单不显示

转载 作者:行者123 更新时间:2023-11-30 17:33:26 26 4
gpt4 key购买 nike

我知道还有其他问题,但它们似乎没有解决我的问题。

这是我的输出,我认为它应该是 Accordion code output screeshot

我是 Angular 的新手,所以我可能遗漏了一些简单的东西,但我似乎看不到它。这将进入我正在制作的更大的应用程序,但我想让它首先在那个之外工作。

感谢任何帮助。

代码:

demo.html

<!DOCTYPE html>
<html ng-app='myApp' >
<head>

<script src="js/app.js"></script>
<script scr="js/ui-bootstrap-tpls-0.10.0"></script>
<script src="js/angular.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<title>Accordion Test</title>

</head>
<body>

<div class="col-md-3">
<div ng-controller="AccordionDemo">
<label class="checkbox">
<input type="checkbox" ng-model="oneAtATime">
Only open one at a time
</label>

<accordion close-others="oneAtATime">
<accordion-group heading="Item1" is-open="true">
the contenct of item one
</accordion-group>

<accordion-group heading = {{group.title}} ng-repeat="group in groups">
{{group.content}}
</accordion-group>

<accordion-group heading="{{dynamicitem}}">
<p>The body of the accordion group lol</p>
<button class="btn btn-default btn-lg glyphicon glyphicon-plus-sign" ng-click="addItem()">Add new items</button>
<div ng-repeat="item in items">{{item}}</div>
</accordion-group>

<accordion-group is-open="isopen">
<accordion-heading>
Open and Close <i class="pull-right glyphicon" ng-class=" {'glyphicon-chevron-down':isopen, 'glyphicon-chevron-right': !isopen} "></i>
</accordion-heading>
Your content is here
</accordion-group>
</accordion>
</div>
</div>

app.js

angular.module('myApp', ['ui.bootstrap']);

function AccordionDemo($scope){
$scope.oneAtATime = true;
$scope.groups = [
{
title: "Dynamic member 1",
content: "member 1 body"
},
{
title :"Dynamic member 2",
content :"member 2 body"
}
];

$scope.dynamicitem = 'Dynamic Item';
$scope.items = ['item 1', 'item 2', 'item 3'];
$scope.addItem = function(){
var newItem = $scope.items.length + 1;
$scope.items.push('Item' + newItem);
};
}

编辑:有什么关系吗

<accordion-group is-open="isopen">

阻止?因为 isopen 可能不绑定(bind)任何东西?

笨拙 http://plnkr.co/edit/npZ35bGLiPkmVqaw5l4J?p=preview

最佳答案

正如 Ashesh 所说,您的 Angular 路径有误,您在 Angular Ui Team 上也有一个有效示例用于 Accordion 控制。

实例: http://plnkr.co/edit/6zhm49PCgPZr8wKD5Szr?p=preview

关于javascript - AngularUI Accordion 菜单不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22530591/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com