In my angularJs app, i am using bootstrap popover and having problem of binding controller data to content of popover.
below is my code.
<ul>
<li ng-repeat="rpt in obj.reports track by rpt.name">
{{rpt.name}}
<span class="glyphicon glyphicon-info-sign"
data-toggle="popover" data-trigger="hover"
title="Driver reports" data-content="rpt.info" popover>
</span>
</li>
</ul>
Please help me how to bind {{rpt.info}} to data-content of popover.
So for making bootstrap work with angular, you could use one of these awesome modules.
Angular Strap
or
Angular UI Boostrap
Angular Strap's modal: http://mgcrea.github.io/angular-strap/#/modals
Angular UI's modal: https://angular-ui.github.io/bootstrap/#/modal
I would use UI Bootstrap (https://angular-ui.github.io/bootstrap/#/top) since it is an Angular app. Here's your code using UI Bootstrap:
var app = angular.module('popoverApp', ['ui.bootstrap']);
app.controller('MainCtrl', function() {
var vm = this;
this.reports = [{
name: 'Report 1',
info: 'this is report 1'
}, {
name: 'Report 2',
info: 'this is report 2'
}, {
name: 'Report 3',
info: 'this is report 3'
}];
});
<!DOCTYPE html>
<html ng-app="popoverApp">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as obj">
<ul>
<li ng-repeat="rpt in obj.reports track by rpt.name">
{{rpt.name}}
<div class="glyphicon glyphicon-info-sign" uib-popover="{{rpt.info}}" popover-trigger="mouseenter" popover-title="Driver reports" popover-placement="right">
</div>
</li>
</ul>
</body>
</html>
Related
I have a css that helps me to generate a preloader or a loading animation. The only thing I lack is the html code. My idea is to create a factory that allows to create the html code necessary for the preloader to be generated. Can you please give me an example or say how to do it ?.
thank you very much.
This can be effectively achieved using AngularJS 1.5's Components
The code creates a <menu-bar> component which spits out bootstrap <nav-bar> in the template.
//-- app.module.js --//
var app = angular.module('app', []);
//-- app.menu-bar.component.js --//
app.component('menuBar', {
bindings: {
brand: '#'
},
templateUrl: '/partials/menuBar.html',
controller: function() {
this.menu = [{
name: "Home",
}, {
name: "About",
}, {
name: "Contact",
}];
}
});
<!-- /partials/menuBar.html -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">{{$ctrl.brand}}</a>
</div>
<div>
<ul class="nav navbar-nav">
<li ng-repeat="menu in $ctrl.menu">
<a href="#">{{menu.name}}
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End of menuBar.html -->
<!-- index.html -->
<html en="us" ng-app='app'>
<head>
<title>
NavBar with Angular 1.5.x components
</title>
<!-- bootsrap css-->
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
<!-- angularjs-->
<script src="lib/angular/angular.min.js"></script>
<!-- The main app script-->
<script src="js/app.module.js"></script>
<script src="js/components/app.navbar.component.js"></script>
</head>
<body>
<menu-bar brand='abc'></menu-bar>
</body>
</html>
I am trying to use ng-repeat with jquery accordion just following some how to but it does not work at all:
I tried to use change the CDN order but it does not work as well...
(html)
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angular.bootstrap/2.1.2/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="angular.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<title>Teste</title>
</head>
<body>
<div ng-app="ui.bootstrap.module" >
<div ng-controller="ui.bootstrap.ctrl">
<accordion close-others="true">
<accordion-group ng-repeat="x in numOfMaps"
heading="{{x.header}}"
is-open="status.isFirstOpen"
is-disabled="status.isFirstDisabled">
{{x.text}}
</accordion-group>
</accordion>
</div>
</div>
</body>
</html>
(js)
var app = angular.module('ui.bootstrap.module', ['ui.bootstrap']);
app.controller('ui.bootstrap.ctrl', function ($scope) {
$scope.numOfMaps = [
{count: 1, text: "Text 1", header: "Header 1"},
{count: 2, text: "Text 3", header: "Header 2"},
{count: 2, text: "Text 3", header: "Header 3"}
];
});
(browser answer)
Text 1 Text 3 Text 3
enter image description here
Your tags are not correct if you are using the angular-ui-bootstrap accordion. This part of your markup should look like this:
<uib-accordion close-others="true">
<div uib-accordion-group ng-repeat="x in numOfMaps"
heading="{{x.header}}"
is-open="status.isFirstOpen"
is-disabled="status.isFirstDisabled">
{{x.text}}
</div>
</uib-accordion>
More info here:
https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes
Is it possible to use template with dynamic ID for Angular UI Popover?
For example:
<div ng-repeat="row in data">
<button class="btn" uib-popover-template="'myTemplate_{{row.id}}.html'" popover-trigger="mouseenter">View</button>
<script type="text/ng-template" id="myTemplate_{{row.id}}.html">
<strong>Name</strong>: {{row.name}}<br/>
<strong>Phone</strong>: {{row.phone}}<br/>
<strong>Email</strong>: {{row.email}}
</script>
</div>
When I mouseover the button Angular tries to fetch the template (eg myTemplate_1.html) from the server instead of using the ng-template.
Am I approaching this right? If not, what's the best way to assign dynamic html content to popovers?
Thanks.
Id's need to be unique, and any data passed through the uib-popover-template will be parsed. The data in the id=myTemplate_{{row.id}} is not being interpreted.
Try something like this:
angular.module('test', [])
.controller('GreetingController', ['$scope',
function($scope) {
$scope.data = [{
name: 'John'
}, {
name: 'Bill'
}];
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="GreetingController">
<div ng-repeat="row in data">
<button class="btn" uib-popover-template="'myTemplate_row.html'" popover-trigger="'mouseenter'">View</button>
</div>
</div>
<script type="text/ng-template" id="myTemplate_row.html">
<strong>Name</strong>: {{row.name}}
<br/>
<strong>Phone</strong>: {{row.phone}}
<br/>
<strong>Email</strong>: {{row.email}}
</script>
Note example doesn't work as I don't have the uib module, but the basics are the same and should show up.
I am using the AngularJS UI Bootstrap popover with outside click trigger and a popover template. It all works as expected, except inside my template I have an ng-repeat with an option to remove one of the items in the repeat. While this all works, as soon as the item is removed, the popover closes - it is as though it thinks I have clicked outside the popover. Here is a plunk to demonstrate: http://plnkr.co/edit/vAk3y779eEmLSmIg9kb4?p=preview
JS:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.dynamicPopover = {
templateUrl: 'myPopoverTemplate.html',
};
$scope.checklistitems = [
{check: false, text: "item 1"},
{check: false, text: "item 2"},
{check: false, text: "item 3"}
];
$scope.delete = function (item) {
var index;
index = $scope.checklistitems.indexOf(item);
$scope.checklistitems.splice(index, 1);
console.log("yo delete: " + item.text)
}
});
html:
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<span>some text to pad</span>
<button uib-popover-template="dynamicPopover.templateUrl"
type="button" class="btn btn-default"
popover-placement="bottom"
popover-trigger="outsideClick"
>Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div ng-repeat="item in checklistitems">
{{item.text}}
<button ng-click="delete(item)">delete</button>
</div>
</script>
</div>
</body>
</html>
I had the same problem, I just found out it is a problem when the HTML in the popover changes!
I changed my ng-ifs to ng-show and the popover didn't close when clicking on a button.
Your solution could be to tag the deleted items and hide them, and make the real 'delete' when the popover closes!
Like this: http://plnkr.co/edit/2NifZtWtUuqh8CCBTALf?p=preview
Working Plnkr
Remove popover-trigger="outsideClick", it should work.
I'm trying to add a bootstrap DateRangePicker on my header template for Angular UI-Grid. I can see that the template is working properly because it shows the Bootstrap Icon. I do not want to use the native angular Type:'date'. I want to use a bootstrap date picker.
I have all the includes needed for this to show up.
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
This is my Template HTML
<!-- DatePickerTemplate HTML -->
<script type="text/ng-template" id="DatePickerTemplate.html">
<div ng-controller="DatePickerController">
<div>Sent On</div>
<div class="input-group date" datepicker-popup is-open="true"
ng-model="COL_FIELD" min-date="2010-01-01">
<input class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</script>
This is my UI Grid columnDefinitons:
{ name: 'Sent On', field: 'SentDateTime', enableCellEdit: false,
allowCellFocus: false, type: 'date', cellFilter: 'date:"M-d-yy H:mm"',
headerCellTemplate: 'DatePickerTemplate.html' }
This is my Directive
app.directive("filterDatePicker", function(){
return {
restrict: 'E',
scope: true,
templateUrl: 'DatePickerTemplate.html'
};
});
I have an empty controller at the moment, what I want to do in the controller is get the dates I pick from the BootStrap DateRangePicker once it's working
Controller
app.controller('DatePickerController', [
'$scope', function($scope) {
// return date picked from bootstrap datepicker
}
]);
When I click on the little menu box it doesn't do anything. I'm not getting any errors in the developer console either.
Here is a Plunker, you can see both Date columns, one on the left is native the one on the right should be bootstrap which is not working.
Can someone please give me an idea of where I'm going wrong. I can't get the BootStrap DatePicker to open. I really want to add a DateRangePicker not just a regular Bootstrap Date Picker.
Date Filter Plunker
It works, using the latest versions of Angular (1.5.0), UI-Bootstrap (1.1.2) and UI-Grid (3.1.1) with correction of some mistakes you made. You forgot to inject the ui.bootstrap module into your application and you didn't add the uib-datepicker-popup directive to your HTML input element. Also you haven got direct access to scope from a custom template. You need to prefix grid.appScope to every property/method you want to access in your controller scope:
You can use grid.appScope in your row template to access elements in your controller's scope.
http://ui-grid.info/docs/#/tutorial/317_custom_templates
Otherwise it "works", at least thus far that the popup opens on tab and when you click the button but it won't overlap the headercell which can possibly be solved with CSS, but i'll leave that to you to figure out. Hope this helps. Good luck with your project. Here's a working snippet:
angular.module('App', [
'ui.bootstrap',
'ui.grid'
]);
angular.module('App').controller('Controller', [
'$scope',
function ($scope) {
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [{
field: 'date',
filterHeaderTemplate: 'DatePicker.html'
}]
};
$scope.datePicker = {
opened: false,
open: function () {
$scope.datePicker.opened = true;
}
};
}
]);
#grid {
width: 100%;
height: 250px;
}
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title>Angular 1.5.0</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.css" />
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.js"></script>
<script type="text/ng-template" id="DatePicker.html">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="grid.appScope.datePicker.value" is-open="grid.appScope.datePicker.opened" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="grid.appScope.datePicker.open()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</script>
</head>
<body ng-controller="Controller">
<div id="grid" ui-grid="gridOptions"></div>
</body>
</html>