大佬教程收集整理的这篇文章主要介绍了jquery – 带表格行的bootstrap模态，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<tr ng-repeat="sermon in sermons | filter:searchText">
<td align="center">{{ sermon.sermondate }}</td>
<td>
<b>{{ sermon.sermontitle }}</b>
<p>{{ sermon.sermonsumMary }}</p>
</td>
<td align="center">
<a ng-href="" data-target="#mymodal" data-toggle="modal" data-sermontitle="{{ sermon.sermontitle }}" data-sermonlink="{{ sermon. sermonlink }}">
<i class="fa fa-youtube-play fa-2x"></i>
</a>
<td align="center" class="download"><i class="fa fa-download fa-2x"></i></td>
我的jquery代码如下
$(document).ready(function () { $('#mymodal').on('shown.bs.modal',function (event) { console.log('button clicked.'); // Button that triggered the modal var button = $(event.relatedTarget) // Extract info from data-* attributes var sermontitle = button.data('sermontitle') var sermonlink = button.data('sermonlink') // update the modal's content. var modal = $(this) modal.find('.modal-title').text(sermontitlE) modal.find('iframe').attr('src',sermonlink); }); });
这是我的模态HTML
<!-- Modal --> <div id="mymodal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Youtube video should play here.</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/dmBWI5EZyHM" frameborder="0" allowfullscreen></iframe> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
我想要实现的是当用户点击表格行中的youtube链接时,模式将显示在data-attribute中传递的youtube链接.
花了一整天研究这个,我仍然没有成功做到这一点.
这是我的样本布道JSON
[ { "id" : "1","sermondate" : "2015-09-27","sermonlength" : "39","sermonlink" : "https://www.youtube.com/watch?v=Za4jjt80kLw","sermonsumMary" : "A must watch.","sermontitle" : "Sunday Morning service Sep 27 2015","sessionid" : "1","viewcount" : "46" },{ "id" : "2","sermondate" : "2015-10-11","sermonlength" : "54","sermonlink" : "https://www.youtube.com/watch?v=PXj8nY0oOF8","sermonsumMary" : "This sermon deals with the important issues of Christian walk.","sermontitle" : "Bible study 11th October","sessionid" : "3","viewcount" : "16" },{ "id" : "4","sermonlength" : "41","sermonlink" : "https://www.youtube.com/watch?v=91xBFt3de1s","sermonsumMary" : "This sermon was preached by pastor James Sipes in Sunday Morning church service on 11th October 2015.","sermontitle" : "Sunday Morning service Oct 11 2015","viewcount" : "13" },{ "id" : "5","sermondate" : "2015-10-18","sermonlength" : "17","sermonlink" : "https://www.youtube.com/watch?v=5jnEoBChZ9i","sermonsumMary" : "This sermon was preached by Kurt Robertson in Sunday school service on 18th October 2015.","sermontitle" : "Missionary to North Korea - Oct 18 2015","viewcount" : "18" },{ "id" : "6","sermonlength" : "46","sermonlink" : "https://www.youtube.com/watch?v=aRf8X7Zgt8c","sermonsumMary" : "This sermon was preached by Kurt Robertson in Sunday Mornign church service on 18th October 2015.","sermontitle" : "Sunday Morning service Oct 18 2015","viewcount" : "6" },{ "id" : "7","sermondate" : "2015-11-01","sermonlength" : "50","sermonlink" : "https://www.youtube.com/watch?v=hnF8EARhTwA","sermonsumMary" : "This sermon was preached by Pastor JAmes Sipes in Sunday school service on 1st November 2015.","sermontitle" : "Bible study Nov 01 2015","viewcount" : "5" } ]
$('a[data-toggle="modal"]').on('click',function() {
$(".modal-title").text($(this).attr('data-sermontitle'));
$("#player").attr('src',$(this).attr('data-sermonlink')+'?autoplay=1');
})
这里也设置了自动播放,唯一的区别是我给出了< iframe>身份,玩家,但这不是必要的.
演示 – > http://jsfiddle.net/32u97dau/
我没有制作一个plnkr / angular-demo,因为我们没有布道的例子,也无法复制“布道中的布道| filter：searchText” – 但这并不重要,上面的内容也适用于你的项目.
一些解释
$(document).ready()在角度上下文中毫无用处.文档加载完成后执行ready(),但此时angular刚刚启动并且没有完成摘要或渲染业务.因此,如果您依赖于DOM中应该“准备好”的东西,即表格由ng-repeat呈现,它将永远不会起作用.一个肮脏的“黑客”是使用$timeout代替：
$timeout(function() { //what you do in $(document).ready() })
相反,$(document).on(‘click’,’a [data-toggle =“modal”]’,…起作用,因为它是delegated event handler.这意味着你将处理程序附加到父文档但它是为子选择器执行a [data-toggle =“modal”] – 它适用于注入/添加的标记,因此它也适用于角度.
在将来,尝试避免使用jQuery – 或者至少jQuery,因为你现在正在使用它.你有angular ui bootstrap和angular strap(我更喜欢)用Angular方式包装bootstrap.您可以使用$timeout作为现成替代品并使用Ng-click而不是附加的jQuery事件处理程序.
以上是大佬教程为你收集整理的jquery – 带表格行的bootstrap模态全部内容，希望文章能够帮你解决jquery – 带表格行的bootstrap模态所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。