I am trying to implement angular-strap modal, I have an external template of modal but it shows as blank. Whats wrong ?
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.3.13" data-semver="1.3.13" src="https://code.angularjs.org/1.3.13/angular.js"></script>
<script data-require="angularstrap#*" data-semver="2.1.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script data-require="angularstrap#*" data-semver="2.1.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button class="btn btn-default" content-template="customer.tpl.html" bs-modal="modal">New Customer</button>
</body>
</html>
Here's link to Plunker
Couple of things you need to fix:
The first is to replace content-template with data-template, and the second is that if you have ng-bind="title", you need to have a title variable on the scope, because ng-bind replaces the content of the HTML element it's on with what it's binded to:
<body>
<button class="btn btn-default" data-template="customer.tpl.html" bs-modal="modal">New Customer</button>
</body>
To see the text in the modal, either remove ng-bind="content" from the body, or assign content variable some value.
Working Plunker.
Source: http://mgcrea.github.io/angular-strap/##modals-examples
Related
I am playing with ng-input-tag and wanted to add bootstrap class to the input element of html so as to get its particular bootstrap class styles, but its not working as expected.
Below is the code:
angular
.module('myApp', ['ngTagsInput'])
.controller('myCtrl', function() {
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/readable/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" />
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label class="control-label" for="disabledInput">Disabled input</label>
<tags-input ng-model="tags" class="form-control"></tags-input>
</div>
</div>
So i hope you ran the code and found that i am unable to get bootstrap form-control class style for directive.
Here is Plunker link : https://plnkr.co/edit/jZlAsJ?p=info
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" />
<script>
angular
.module('myApp', ['ngTagsInput'])
.controller('myCtrl', function() {
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label class="control-label" for="disabledInput"> input</label>
<tags-input ng-model="tags"></tags-input>
</div>
</div>
</body>
</html>
See this plunker ... I've solved this for you ( you may need to modify the styling a bit).
https://plnkr.co/edit/sKxMOLWoDPtYNqE8hunS?p=preview
You need to add jquery in your code.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
Bootstrap js will need jquery to run. Please keep in mind that you have added jquery (above script) before bootstrap.js (watch my code carefully, review the sequel).
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.
I'm trying to create a div which will show / hide when a button is clicked. The UI Bootstrap page shows a nice simple example that uses a css transition.
Here's my fiddle where I copy their code, almost exactly (slight change to make html syntax highlighting work, and a line to declare my "app" in the js).
As you can see, it doesn't work as in the example -- there is no transition. Why not? Maybe a css transition rule is needed -- but isn't that part of what bootstrap.css provides?
for posterity, the equivalent html file from the fiddle would be:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script>
</head>
<body ng-app="my_app">
<div ng-controller="CollapseDemoCtrl">
<button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr />
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
</body>
</html>
and the equivalent .js would be:
var my_app = angular.module('my_app', ['ui.bootstrap']);
my_app.controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
});
Thanks!
Angulajs UI Bootstrap 0.13.0 need ngAnimate module for animation. Register ngAnimate it will work. issue
Original plnkr
Modified, animation working plnkr
Just downgrade the ui-bootstrap version to 0.12.0. There is a bug in 0.13.0 that makes the animation not work.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script>
</head>
<body ng-app="my_app">
<div ng-controller="CollapseDemoCtrl">
<button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr />
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
</body>
</html>
The JS can stay the same. I just modified the ui-bootstrap version in the html code.
Here is the updated fiddle as well - https://jsfiddle.net/xv7tws10/5/
Edit: See Premchandra's response below. Apparently you have to include ng-animate in order to get collapse animation to work in angular 1.3.
There seems to be a version limit up until where this stops to animate.
Here is a Fiddle to see it working as you want it to, but with the newest versions it will only work with.
<html !DOCTYPE html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-app="my_app">
<br>
<div ng-controller="CollapseDemoCtrl">
<button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr />
<div collapse="isCollapsed" >
<div class="well well-lg">Some content</div>
</div>
</div>
<script src="http://code.angularjs.org/1.2.28/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.8.0/ui-bootstrap.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-animate.min.js"></script>
<script>
angular.module('my_app', ['ngAnimate', 'ui.bootstrap']);
function CollapseDemoCtrl($scope) {
$scope.isCollapsed = false;
}
</script>
</body>
</html>
I am using the multi select directive for angular. After I have selected some values from the button, the button label gets updated to reflect the change. I want to refresh/reinitialize the directive on a button click without refreshing the page so that button goes back to the original state. Please find the link for plunker below.
Punker: http://plnkr.co/edit/52kgSkn0V3qwH4NkAAad?p=preview
<html>
<head>
<script data-require="angular.js#1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="isteven-multi-select.css" />
<script src="isteven-multi-select.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="main" >
<div>
<div isteven-multi-select
max-labels="2"
input-model="plugins"
output-model="chosenPlugins"
button-label="name"
item-label="name"
tick-property="selected">
</div>
<div>
Plugins: {{ chosenPlugins }}
</div>
<div>
<button ng-click="resetDirective()">Reset</button>
</div>
</div>
</body>
</html>
I am trying to build a tab set that would dynamically change on user action using bs-tabs angularstrap directive and ng-repeat (Say initially the tabs were a,b,c. On some user action it should change to x,y,z)
I am trying to do this by pointing the ng-repeat to a new array object on an user action say a click of a button.
Instead of the tab set getting refreshed, I am noticing a strange behavior
Ive recreated it in this plnkr, please have a look at it,
http://plnkr.co/edit/bpKDx56bieIshKaedzv6?p=preview
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>AngularStrap - Tab directive</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="//mgcrea.github.com/angular-strap/css/prettify.css" rel="stylesheet">
<!-- required libraries -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//mgcrea.github.com/angular-strap/js/angular-strap.js"></script>
<!-- optional libraries -->
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.0/fastclick.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{tab.title}}"><p>{{tab.content}}</p></div>
</div>
<button type="button" class="btn btn-primary" ng-click="changeTabs()">Show different set of tabs</button>
</body>
</html>
Looking at the code it seems that the tab directive observes the active tab value and refreshes only the tab content using transclusion, whereas the tab title is only assigned initially.
I think the only way to change title dinamically is creating a new directive that creates a tab directive dinamically, initializing it with the fresh values.