Below is the implementation of tabs using Angular UI-bootstrap . I would like to include some feature to close the opened tabs. Is there a way we can do it.
https://angular-ui.github.io/bootstrap/#/tabs
You could put it in a collapse?
How would you like your site to react, exactly? Otherwise you would have to write your own directive.
Here's an example:
index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<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="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CollapseDemoCtrl">
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
<div class="well well-lg">**your tabs inside of this**</div>
</div>
</div>
</body>
</html>
example.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
});
Related
My html and javascript are as follows, I have the following element
<i class="material-icons" ng-click="clicked()" md-48>add_circle</i>
Which works when clicked i.e. by bringing up a dialog, however the following on the same page does not work.
html
<body ng-cloak>
<div ng-cloak ng-controller="mainController" >
<div layout="row" layout-align="end end">
<md-button aria-label="Eat cake" ng-click="clicked()"></md-button>
</div>
</div>
</body>
angular
angular.module('notifyMe', ['ngMaterial', 'material.svgAssetsCache'])
.controller('mainController', function($scope, $mdDialog) {
$scope.clicked = function () {
alert('Worked!');
};
})
No, your code should work. Make sure you loaded the dependencies as below:
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.clicked = function () {
alert('Worked!');
};
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<!-- Angular Material Dependencies -->
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script>
<!-- Use dev version of Angular Material -->
<script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<div layout="column" layout-fill flex style="max-height:100%">
<md-toolbar>
<md-button ng-click=clicked()>Click here</md-button>
</md-toolbar>
</div>
</body>
</html>
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 have the following Angular UI Modal:
<script type="text/ng-template" id="dialogBox">
<div class="modal-header">
<p class="modal-title"><b>{{title}}</b></p>
</div>
{{msg}}
<div class="modal-footer">
<button class="btn btn-primary b1" type="submit">OK</button>
</div>
</script>
What I want is to set msg with HTML markup, such as "This is a <b>text</b>". I tried, however the HTML is not rendered (the modal shows the markup). Is this achievable?
You have to use ngHtmlbind. It requires angular-sanitize.js (you have to add ngSanitize to your module dependencies). You also have to declare the html you want to render is safe using $sce.trustAsHtml. For example:
The javascript:
(function(){
'use strict';
angular
.module('myModule', ['ngSanitize']);
angular
.module('myModule')
.controller('showHtmlCtrl', showHtmlCtrl);
showHtmlCtrl.$inject = ['$sce'];
function showHtmlCtrl($sce){
var vm = this;
var html = "<p> Hello world! </p>";
vm.html = $sce.trustAsHtml(html);
}
})();
The view:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#~1.4.3" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script data-require="angular-sanitize#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myModule" ng-controller="showHtmlCtrl as shc">
<div ng-bind-html="shc.html"></div>
</body>
</html>
you can see it working this plunker
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 start with AngularJS. Try create easy app, but dont working.
<div class="col-md-10 editor" ng-controller="Editor">
{{hello}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="./js/script.js"></script>
script.js
var app = angular.module('myApp', []);
app.controller('Editor', function($scope) {
$scope.hello = "Hello!";
});
What am I doing wrong?
In console dont have errors.
You have to specify the app in your Html file as well.
Something like:
<body ng-app="myApp">
</body>
https://docs.angularjs.org/api/ng/directive/ngApp
Use this:
<html data-ng-app="myApp">
<head>
</head>
<body>
<div class="col-md-10 editor" ng-controller="Editor">
{{hello}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
maybe, you must first load script.js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="./js/script.js"></script>
<div class="col-md-10 editor" ng-controller="Editor">
{{hello}}
</div>