AngularStrap的popover初尝试

官网参考 http://mgcrea.github.io/angular-strap/#/popovers


1、使用popover实现弹出框内包含下拉列表和输入框

采用内容模板的形式,然后在触发popover的按钮里指定,使用data-template-url指定ng-template,则需要按照bootstrap里的样式写,不然 显示效果很奇怪

<script type="text/ng-template" id="angularpopover.html">
<div class="popover" tabindex="-1">
<div class="arrow"></div>
<h3 class="popover-title">XX</h3>
<div class="popover-content">
	<select class='form-control' ng-model='update_type'>
		<option value=''>请选择类型</option>
	</select>
	<input class='form-control' type='text' name='text' ng-model='content' placeholder='请输入'>
	<input class='form-control' type='text' name=‘tags’' placeholder='请输入' ng-model='tags'>
	<a ng-model='update_id' ng-click=''><span class='glyphicon glyphicon-pencil'></span>XX</a>
</div>
</div>
</script>

<a class="btn btn-sm btn-primary" data-placement="bottom"  data-template-url="angularpopover.html" data-auto-close="1" bs-popover><span class="glyphicon glyphicon-pencil"></span>XX</a>


2、在popover出现前,给popover弹出框里传值

按钮里增加ng-click方法即可,然后通过ng-click给template内的model传值。

另一种方式是在页面生成时就会执行的方法,即官网中的onBeforeShow(),使用方法

<!-- 在按钮元素的属性中增加 -->
bs-on-before-show="calledBeforePopover()"

    $scope.calledBeforePopover = function(){
      //todo
    }



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值