Twitter bootstrap 如何将引导面板与AngularJS ng repeat一起使用

Twitter bootstrap 如何将引导面板与AngularJS ng repeat一起使用,twitter-bootstrap,angularjs-ng-repeat,Twitter Bootstrap,Angularjs Ng Repeat,我使用w3schools.com上的教程创建面板,但当我添加angular时,我的代码停止工作 这是我的代码: 我已经看了这些问题: 也许还有其他人,但我还没有找到任何适合我的。代码在其他方面工作得很好。我得到了面板来显示我想要的方式,角度填充很好 我的问题是,当另一个面板打开时,面板不会关闭 我使用的是UI引导,所以使用这种方法的解决方案是可以接受的 更新:下面是我的答案,我有一些工作,这似乎是我要做的,但是有几个问题我不知道如何解决: 一旦我添加了使状态

我使用w3schools.com上的教程创建面板,但当我添加angular时,我的代码停止工作

这是我的代码


  • 我已经看了这些问题:

    也许还有其他人,但我还没有找到任何适合我的。代码在其他方面工作得很好。我得到了面板来显示我想要的方式,角度填充很好

    我的问题是,当另一个面板打开时,面板不会关闭

    我使用的是UI引导,所以使用这种方法的解决方案是可以接受的


    更新:下面是我的答案,我有一些工作,这似乎是我要做的,但是有几个问题我不知道如何解决:

    
    
    
    
    一旦我添加了使状态函数生效的js脚本:

    $scope.status = {
        isFirstOpen: true,
        isFirstDisabled: false
    };
    
    它们都会先打开一秒钟,然后强制关闭,不会重新打开。我如何绕过这个?我需要一种方法来让每个手风琴都独一无二,因为我认为它们是相互分离的,因为没有数据目标来告诉我打开和关闭哪个面板或者我不知道的东西。有人知道吗?我需要JS来实现功能,因为我需要一个手风琴来保持打开和禁用状态,而其他手风琴可以打开和关闭。

    您可以使用并设置
    close others=“true”

    然后在每个重复块中连接您想要的任何逻辑

    下面是StackSnippets中的演示
    var-app=angular.module('ui.bootstrap.module',['ui.bootstrap']);
    app.controller('ui.bootstrap.ctrl',函数($scope){
    $scope.numOfMaps=[
    {计数:1,文本:“文本1”,标题:“标题1”},
    {计数:2,文本:“文本3”,标题:“标题2”},
    {计数:2,文本:“文本3”,标题:“标题3”}
    ];
    });
    
    
    {{x.text}}
    
    问题是,一旦我添加了实际生成状态函数的脚本,它就会消失。因为现在有不止一个手风琴,而且它们似乎都能让彼此发挥作用,所以当页面加载时,它们都会打开一秒钟,然后关闭,无法重新打开。面板的好处,甚至是我在面板设计之前使用的另一种手风琴,是有一个数据目标,这样它就知道哪个“标题”正在切换哪个“内容”。这似乎没有那个功能。但我试着加上它。也许我做错了?我会用它来编辑我的问题。我非常不喜欢我的问题被编辑。当我的代码是我的代码时,没有理由为了您和大多数其他人的可读性而编辑我的代码。我从来没有见过html属性像那样缩进,觉得它很难看,真的没有理由编辑我的语法。我只想删除这篇文章,因为它不再是我自己的,但我不想阻碍我文章的未来。所以,谢谢你浪费时间编辑一篇你不能正确回答的帖子,我想至少这让你感觉好些。