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
Related
index.html
test.json
I want to be able to dynamically filter by the user clicking the button repersenting who's specific phone number they would like to see instead of using "filter: {Name: 'Bob'}" only showing Bobs info but I have not been able to find a way to use a variable in place of 'Bob'. I have provided the code in images.
Plunker was right in how I use a variable in my filter, I just did what Shb said in the comments as well so my buttons were out of scope and I just adjusted the tags ng-app and ng-controller to the body and Punkers solution to the filter works. Thanks guys something I should have easily seen.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script src="script.js"></script>
<script>
var app = angular.module('DB', []);
app.controller('controller', function($scope) {
$scope.db = [{
"Name": "Bob",
Phones: ["555-555-5555", "555-556-5556"]
}, {
"Name": "Jim",
Phones: ["555-555-5554"]
}];
$scope.filterName = 'Bob';
});
</script>
</head>
<body ng-app="DB" ng-controller="controller">
<button ng-click="filterName='Bob'">Bob</button>
<button ng-click="filterName='Jim'">Jim</button>
<ul>
<li ng-repeat="phones in db | filter: {Name: filterName}">
{{phones.Phones}}
</li>
</ul>
</body>
</html>
Try following code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script src="script.js"></script>
<script>
var app = angular.module('DB', []);
app.controller('controller', function($scope) {
$scope.db = [{
"Name": "Bob",
Phones: ["555-555-5555", "555-556-5556"]
}, {
"Name": "Jim",
Phones: ["555-555-5554"]
}];
$scope.filterName = 'Bob';
});
</script>
</head>
<body ng-app="DB" ng-controller="controller">
<button ng-click="filterName='Bob'">Bob</button>
<button ng-click="filterName='Jim'">Jim</button>
<ul>
<li ng-repeat="phones in db | filter: {Name: filterName}">
{{phones.Phones}}
</li>
</ul>
</body>
</html>
Plunker
I'm trying to use HTML to style the title in a popover window in angular bootrap, but it's appearing as plain text
Since the the popover body can contain HTML styling, I thought this would work
<!doctype html>
<html ng-app="popover.title.html">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
angular.module('popover.title.html', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('popover.title.html').controller('htmlTitleCtrl', function ($scope, $sce) {
$scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">I can</b> have <div class="label label-success">HTML</div> content');
});
</script>
<div ng-controller="htmlTitleCtrl">
<div style="padding-top: 15em; padding-left: 7em;">
<button uib-popover-html="htmlPopover" popover-title="This is in <span style='color:red;'>red</span>" class="btn btn-default">HTML Popover</button>
</div>
</div>
</body>
</html>
Running plunkr: https://plnkr.co/edit/A1qwqnxOZwLCs05ePS38?p=preview
Is it possible to have the colours display correctly in the title?
The title of the popover used ng-bind which sets the title element's textContent (https://github.com/angular-ui/bootstrap/blob/master/template/popover/popover-html.html#L4, https://github.com/angular/angular.js/blob/master/src/ng/directive/ngBind.js#L63). This means HTML code within the title won't be rendered as HTML.
You can, however, use CSS to style the title of the popover.
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>
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 am trying to use angularjs ui bootstrap accordion to built a nested accordion.
Although the nested accordion works fine, the transitions from item to another one is too strict, i.e. transitions are not smooth as shown in the https://angular-ui.github.io/bootstrap/ website.
My code is here http://plnkr.co/edit/bTYLBXKHVXbDfElTcb0U?p=preview
angular.module('plunker', ['ui.bootstrap'])
.controller("AccordionDemoCtrl",["$scope", function ($scope) {
$scope.staticTitle = "Static Title";
$scope.groups = [
{ title: "Dynamic Title 1", content: "Dynamic content 1" },
{ title: "Dynamic Title 2", content: "Dynamic content 2" }
];
}]);
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="script.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<uib-accordion>
<uib-accordion-group heading="staticTitle">
<uib-accordion>
<uib-accordion-group heading="new heading">new content</uib-accordion-group>
<uib-accordion-group heading="new heading 2">new content 2</uib-accordion-group>
</uib-accordion>
</uib-accordion-group>
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</uib-accordion-group>
</uib-accordion>
</div>
</body>
</html>
I am looking for a smooth transition solution for the accordion.
Am I missing something or is this the way how accordion works?
Any help is welcomed
You need ngAnimate for this, it's required from version 1.13.0 ui-bootstrap.
Add it as a script tag and inject in your app.
I've created plunkr with the solution.
angular.module('plunker', ['ui.bootstrap','ngAnimate'])
.controller("AccordionDemoCtrl",["$scope", function ($scope) {
$scope.staticTitle = "Static Title";
$scope.groups = [
{ title: "Dynamic Title 1", content: "Dynamic content 1" },
{ title: "Dynamic Title 2", content: "Dynamic content 2" }
];
}]);