Bootstrap 弹出框在 AngularJs ng-repeat 中不起作用

2024-03-15

我有一个国家/地区列表,我正在使用 ng-repeat 填充这些国家/地区列表,一切正常。另外,我试图通过使用引导弹出窗口来显示每个国家/地区内的一些其他详细信息,但它似乎不起作用,所以有人可以帮助我吗?

网页代码:

<body ng-app="app" ng-controller="my_controller">    
<div class="span3 projectCard" ng-repeat="country in all_countries">
    <div class="projectCardHeight">
        <button class="btn close cardClose" ng-click="deleteCountry(country.id)">×</button>
        <div class="cardHeader">Country</div>
        <div class="cardBody">{{country.id}}</div>
        <div class="cardBody">{{country.title}}</div>
        <div class="cardBody"><a href="#" id="pop{{country.id}}" class="btn btn-primary" rel="popover" data-content="This is the <b>body</b> of Popover" data-original-title="Creativity Tuts">pop</a></div>
    </div>
</div>
 </body>

JavaScript 代码:

var app = angular.module("app", []);
app.controller('my_controller', function($scope) {  
    $scope.all_countries = [
        {"id":28,"title":"Sweden"},
        {"id":56,"title":"USA"},
        {"id":89,"title":"England"}];
});

function deleteCountry(id)
{
    alert("Do something");
}

$(document).ready(function () {
    $("a[rel=popover]")
        .popover({ placement: 'bottom', html: 'true' })
        .click(function (e) {
            e.preventDefault();
        });
});

请参考这个JsFiddle http://jsfiddle.net/shansubra/4bqgX/54/


Demo: http://jsfiddle.net/5ww8e/1/ http://jsfiddle.net/5ww8e/1/

创建一个名为的新指令bs-popover并将其与ng-repeat。扳机popover里面的方法bs-popover指示。

另外你的js文件加载顺序是错误的,你应该在引导之前加载jquery。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap 弹出框在 AngularJs ng-repeat 中不起作用 的相关文章

随机推荐

  • 使用 Tortoise SVN 通过 VPN 进行 SVN+SSH 结账,Smartsvn 失败

    系统和连接详细信息 我使用的是运行 Windows 7 的 64 位系统 我安装了 Open VPN 和 Tortoise SVN 64 位 该存储库位于远程系统中 我们使用 VPN 进行连接 到目前为止我做了什么 我已按照必要的步骤启动
  • Firestore 将值添加到数组字段

    我尝试使用 Firebase 云函数将聊天室的 id 添加到数组字段中的用户文档中 我似乎无法弄清楚写入数组字段类型的方法 这是我的云函数 exports updateMessages functions firestore documen
  • 仅返回 LEFT JOIN 的最新结果[重复]

    这个问题在这里已经有答案了 我正在查询两个表 students2014 和notes2014 中的数据 以便返回学生列表以及每个学生的注释 为此 我使用以下 select 语句 SELECT FROM students2014 LEFT J
  • Qt vtable错误

    我正在浏览旧的 Trolltech Qt 教程 因为我发现它们比新的教程更有帮助 并且undefined reference to vtable当我到达一个实现它自己的信号的类小部件时 我遇到了错误 http doc trolltech c
  • jquery 如何删除第一个 x div 的?

    如果我单击按钮 我会尝试删除前 4 个 div div class test div class 1 div div class 1 div div class 1 div div class 1 div div class 1 div d
  • 在 tkinter 上清除并绘制 matplotlib 图形

    我当前的代码需要一些帮助 我想通过 tkinter 创建一个窗口 并在我之前通过 matplotlib 创建的画布中显示一个绘图 这一点我还没有达到 我的问题是我想通过点击按钮来清除画布 为了清除画布 我想先初始化它 然后才能用绘图填充它
  • 具有通用返回类型但不具有通用输入的方法。这可能吗?

    假设我们有一个NodeData class public class NodeData
  • Facebook 图形 API 响应大小限制(错误代码 1)

    只是分享我在测试我的应用程序时遇到的一些信息 Facebook Graph API 实现了速率限制 如其上所述文档页 https developers facebook com docs graph api advanced rate li
  • 在 C# 中解析 html 的最佳方法是什么? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 将绘图添加到 matplotlib 中的给定图形

    我在代码的一部分中创建了一个图形 如下所示 n arange 51 fig3 plt figure plt semilogy n a1mag ro 现在 我想在代码的后面部分向该图添加另一个绘图 有没有办法在绘图时访问Fig3 建议完全保留
  • 将文件上传到 Dropbox 中的特定文件夹

    我使用此示例将文件上传到保管箱 https github com geersch DropboxRESTApi blob master src part 5 README md https github com geersch Dropbo
  • 使用 sha256WithRSAEncryption 进行签名需要什么版本的 OpenSSL

    使用 PHP 5 2 4 和 OpenSSL 0 9 8g 模块我试图创建一个签名摘要 openssl sign stuff signeddigest key sha256WithRSAEncryption 唉 signeddigest 返
  • 如何设置选择标签的选项元素的样式?

    我正在尝试设置一个的风格option in a selectGoogle Chrome 中的下拉菜单 它适用于除 IE9 和 Chrome 之外的所有浏览器 option red background color cc0000 font w
  • Perl regex /o 优化还是错误?

    我正在读perldoc perlre并注意到这句有点有趣的台词 o pretend to optimize your code but actually introduce bugs 我搜索了文档的其余部分 但没有找到对提到的 错误 的另一
  • 如何在 flutter App 上叠加一个小部件?

    我想要一个位于整个应用程序之上的小部件 当我尝试这样做时Overlay of context insert替换该路线后 覆盖层随后会消失 有没有办法在我的应用程序顶部添加一个小部件 即使屏幕稍后弹出 也许存在更优化的方式 但作为一个选项 这
  • 指定输出程序集中 .csdl / .ssdl / .msl 元数据文件的位置

    我有一个 EF 项目 其中包含我已成功使用的数据模型 元数据工件处理 选项设置为 嵌入输出程序集中 由于 edmx 文件位于项目的根文件夹中 EntityConnectionStringBuilder 中使用的元数据字符串设置为 res m
  • 为什么 ::before 伪元素不能与 :visited 伪类一起使用?

    我正在尝试使用伪类和伪元素来设计我的元素 喜欢hover before工作正常但是 visited before不管用 如果链接被访问 我想显示 已看到 但是 visited before不工作 before after box sizin
  • SASS 项目中从右到左 (RTL) 支持

    我想知道是否可以制作一个 mixin 来处理多个参数作为应转换为 rtl 的属性 我想做类似的事情 css selector width 300px height 200px include rtl padding 10px 5px 3px
  • 找不到 Pyspark 模块

    我正在尝试在 Yarn 中执行一个简单的 Pyspark 作业 这是代码 from pyspark import SparkConf SparkContext conf SparkConf setMaster yarn client set
  • Bootstrap 弹出框在 AngularJs ng-repeat 中不起作用

    我有一个国家 地区列表 我正在使用 ng repeat 填充这些国家 地区列表 一切正常 另外 我试图通过使用引导弹出窗口来显示每个国家 地区内的一些其他详细信息 但它似乎不起作用 所以有人可以帮助我吗 网页代码 div class spa