How to Add Custom Header for bootstrap popover in angularjs application

Question

How we can add the custom header in popover in bootstrap .. I have used below code and i want to add custom header with some links:

<script type="text/ng-template" id="abc.html">

        <div class="form-group">


            <div class="popover-grid-block">
               <p>Test</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm btn-primary" title="SAVE" ng-click="SaveTestPlanData()" data-dismiss="popover">
                    <span aria-hidden="true" class="glyphicon glyphicon-floppy-disk"></span> {{ 'Save' | translate }}
                </button>

                <button type="button" title="CLOSE" class="btn btn-default btn-sm trigger" popover-close data-dismiss="popover">
                    <span aria-hidden="true" class="glyphicon glyphicon-eye-close"></span>
                </button>
            </div>
        </div>
    </script>

Answer 1

You may try like this.

 angular.module('bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); angular.module('bootstrap.demo').controller('PopoverDemo', function ($scope) { });

 <!doctype html> <html ng-app="bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin:100px"> <div ng-controller="PopoverDemo"> <button popover-template="'popover.html'" popover-placement="right" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouse over me</button> <script type="text/ng-template" id="popover.html"> <div> <div class='header'> Custom Header </div> <hr> <div class='content'> Your custom Data with header and footer </div> </div> </script> </div> </body> </html>

How to Add Custom Header for bootstrap popover in angularjs application

Question

1 answers

solution1
1 ACCPTED 2016-03-11 09:13:38

How to Add Custom Header for bootstrap popover in angularjs application

Question

1 answers

solution1 1 ACCPTED 2016-03-11 09:13:38

solution1
1 ACCPTED 2016-03-11 09:13:38