gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 05:51:07 25 4
gpt4 key购买 nike

我有一个国家/地区列表,我正在使用 ng-repeat 填充那些,一切正常。另外,我正在尝试通过使用 Bootstrap 弹出窗口在每个国家/地区显示其他一些细节,但它似乎不起作用,所以有人可以帮助我吗?

html代码:

<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/5ww8e/1/

创建一个名为 bs-popover 的新指令并与 ng-repeat 一起应用.触发 popover内部方法bs-popover指示。

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

关于angularjs - Bootstrap 弹出框在 AngularJs ng-repeat 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20894104/

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