Markup :
md-tab label="Current ({{ctrl.ongoing_assignments.length}})"
Required Output :
Current (1) <===== i want the number will be in red background with round shape like notification in facebook
If you want this styling to apply to only this element you can do:
In a css file:
.reference{
background-color: red;
}
Your html:
md-tab class="reference" label="Current ({{ctrl.ongoing_assignments.length}})"
If you want this styling to apply to all the md-tab labels you can do:
md-tab {
background-color: red;
}
From your question i dont know this solution is a step in success or not, but see if its helpful then i can make modifications to achieve the desired result.
Currently, 2 tabs are shown:
- first one is a normal tab, and - second one changes background color on being active.
angular.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function ($scope, $mdSidenav) {
$scope.ButtonText = "Test Button";
$scope.buttonClick = function() {
alert("First Angular Material App");
};
});
.other-div md-tabs .md-tab.md-active .md-ripple-container {
color: rgb(248,187,208);
background: red;
z-index: -1;
}
.other-div md-tabs .md-tab.md-active {
color: green;
}
<html ng-app="MyApp">
<head>
<title>First App Angular Material</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js"></script>
</head>
<body>
<div ng-controller="AppCtrl">
<md-tabs md-selected="1" md-stretch-tabs="auto" md-align="bottom" md-dynamic-height md-border-bottom md-center-tab md-swipe-content>
<md-tab label="tab1">
<md-tab-body>
<h1>Welcome to first tab</h1>
<md-tab-body>
</md-tab>
<md-tab label="tab2">
<md-tab-body>
<h1>Welcome to Second tab</h1>
<md-tab-body>
</md-tab>
<md-tab label="tab3">
<md-tab-body>
<h1>Welcome to Third tab</h1>
<md-tab-body>
</md-tab>
</md-tabs>
</div>
<div ng-controller="AppCtrl" class='other-div'>
<md-tabs md-selected="1" md-stretch-tabs="auto" md-align="bottom" md-dynamic-height md-border-bottom md-center-tab md-swipe-content>
<md-tab label="tab1">
<md-tab-body>
<h1>Welcome to first tab</h1>
<md-tab-body>
</md-tab>
<md-tab label="tab2">
<md-tab-body>
<h1>Welcome to Second tab</h1>
<md-tab-body>
</md-tab>
<md-tab label="tab3">
<md-tab-body>
<h1>Welcome to Third tab</h1>
<md-tab-body>
</md-tab>
</md-tabs>
</div>
</body>
</html>
Related
I am trying to use a toggle switch inside a tab control, to change the display of data for the current tab. So I have 3 tabs (Plots, People and Address). Tabs 2 & 3 are easy as they are just plain text content. But tab 1 (Plots) I need to filter the display of data.
So I broke this down to try and get two buttons to hide and display the divs as I want them to, but they both just hide everything.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#current").toggle();
});
});
$(document).ready(function() {
$("button").click(function() {
$("#all").toggle();
});
});
</script>
</head>
<body>
<!--<div>
<input id="current" type="radio" name="group1" value="plots">Current Plots
<br>
<input id="all" type="radio" name="group1" value="plots1">All Plots
</div>-->
<button class="current">Toggle Current Plots DIV</button>
<button class="all">Toggle all plots DIV</button>
<hr>
<div class="current" id="current">
<p>This is a paragraph with little content.</p>
<p>Paragraph 1 - Current Plots.</p>
<hr>
</div>
<div class="all" id="all">
<p>This is another small paragraph.</p>
<p>Paragraph 2 - All Plots</p>
<hr>
</div>
</body>
</html>
It's because for your click event you are using button as a selector, so any button element is going to toggle everything. Change the selector to the class on the button.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// This changed from button
$(".current").click(function() {
$("#current").toggle();
});
});
$(document).ready(function() {
// This changed from button
$(".all").click(function() {
$("#all").toggle();
});
});
</script>
</head>
<body>
<!--<div>
<input id="current" type="radio" name="group1" value="plots">Current Plots
<br>
<input id="all" type="radio" name="group1" value="plots1">All Plots
</div>-->
<button class="current">Toggle Current Plots DIV</button>
<button class="all">Toggle all plots DIV</button>
<hr>
<div class="current" id="current">
<p>This is a paragraph with little content.</p>
<p>Paragraph 1 - Current Plots.</p>
<hr>
</div>
<div class="all" id="all">
<p>This is another small paragraph.</p>
<p>Paragraph 2 - All Plots</p>
<hr>
</div>
</body>
</html>
Edit
Adding a more efficient way to handle by creating one function than can handle the buttons using data attributes on the button elements.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Use a data attribute on the button to toggle an element's id.
$('button').click(function() {
// get the button's data-target value
let target = $(this).data('target');
// use the data-target value to pass as the id of the target element.
$("#" + target).toggle();
});
});
</script>
</head>
<body>
<button data-target="current">Toggle Current Plots DIV</button>
<button data-target="all">Toggle all plots DIV</button>
<hr>
<div id="current">
<p>This is a paragraph with little content.</p>
<p>Paragraph 1 - Current Plots.</p>
<hr>
</div>
<div id="all">
<p>This is another small paragraph.</p>
<p>Paragraph 2 - All Plots</p>
<hr>
</div>
</body>
</html>
I used angularjs material tabs here I need scroll for "md-tab-body" section, I have tried all the possibility from stack overflow but not working scroll.
<md-tabs md-enable-disconnect md-dynamic-height md-border-bottom md-selected='vm.tabIndex' id="wardName{{$index}}">
<md-tab ng-repeat="ward in vm.inpatientwards" ng-click="vm.loadWardview(ward._id)">
<md-tab-label>
<span translate id="ipwardId{{$index}}">{{ward.name}}</span>
</md-tab-label>
<md-tab-body>
<div style="margin:10px;" layout="row">
<md-grid-list flex>
<md-grid-tile ng-repeat="bed in vm.wardbeds" ng-click="vm.selectBed(bed)" id="wardBeds{{$index}}">
<md-grid-tile-header>
{{::bed.name}}
</md-grid-tile-header>
</md-grid-tile>
</md-grid-list>
</div>
</md-tab-body>
</md-tab>
</md-tabs>
The above code i used my application. I need help to set oveflow-y for body section.
You can do something like this may this help you in case if your scenario is like this:
<!-- if you have any div outside-->
<div style="height:100%">
<md-tabs md-enable-disconnect md-border-bottom md-selected='vm.tabIndex' id="wardName{{$index}}" class="helloHeight">
<md-tab ng-repeat="ward in vm.inpatientwards" ng-click="vm.loadWardview(ward._id)">
<md-tab-label>
<span translate id="ipwardId{{$index}}">{{ward.name}}</span>
</md-tab-label>
<md-tab-body>
<!-- try to inspect this div-->
<div style="margin:10px;height:100%;overflow-y: auto;" layout="row">
<md-grid-list flex>
<md-grid-tile ng-repeat="bed in vm.wardbeds" ng-click="vm.selectBed(bed)" id="wardBeds{{$index}}">
<md-grid-tile-header >
{{::bed.name}}
</md-grid-tile-header>
</md-grid-tile>
</md-grid-list>
</div>
</md-tab-body>
</md-tab>
.helloHeight{
height:100%;
}
And not sure as not tested this code.
I wanted to build a simple template like Youtube with angular material.
But I am kinda stuck with a sidebar navigation issue. The following should be possible in the template
1. The sidebar should be opened on load (depending on the size of the screen)
2. If the browser is resized, the sidebar should autohide/show
3. If the menu button on the top-left is clicked, the sidebar should toggle as a part of the page (and not an overlay). It can be an overlay only when the screensize is small enough.
The menu button in the navigation bar and the sidebar are in different controllers. So I have written a factory to share the click event and its outcome
The html code for the html is as below
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" />
<style>
.add-vertical-shadow{
-webkit-box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
}
</style>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<!-- User js files here -->
<script src="main.js"></script>
<script>
</script>
</head>
<body ng-app="mainApp" layout="column">
<div ng-cloak="" class="toolbardemoBasicUsage" layout="column">
<md-toolbar class="md-hue-2 add-vertical-shadow" ng-controller="navCtrl">
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="menu" ng-click="toggleClicked()">
<md-icon aria-label="Menu" class="material-icons">menu</md-icon>
</md-button>
<h2 flex="" md-truncate="">MyApp</h2>
<md-button class="md-icon-button" aria-label="more_vert">
<md-icon aria-label="more_vert" class="material-icons">more_vert</md-icon>
</md-button>
</div>
</md-toolbar>
<!-- this will contain the main body and the sidebar -->
<md-content flex >
<div layout="vertical" ng-controller="sidebarCtrl" layout-fill>
<!-- Sidebar start -->
<md-sidenav class="md-sidenav-left md-whiteframe-4dp" md-component-id="leftSideBar" md-is-locked-open="{{hide}}">
<form>
<md-input-container>
<label for="testInput">Test input</label>
<input id="testInput" type="text" ng-model="data" />
</md-input-container>
</form>
</md-sidenav>
<!-- Sidebar end -->
<!-- Main Body start -->
<md-content flex layout-padding>
Main body
</md-content>
<!-- Main Body end -->
</div>
</md-content>
</div>
</body>
</html>
and the js file
var mainApp = angular.module('mainApp',['ngMaterial']);
mainApp.factory('toggleSidebar', function($mdSidenav, $mdMedia){
return {
hide : $mdMedia('gt-xs'),
toggle : function(sidebarElement){
$mdSidenav(sidebarElement).toggle();
this.hide = !this.hide;
}
};
});
mainApp.controller('navCtrl', function($scope, toggleSidebar) {
$scope.toggleClicked = function(){
toggleSidebar.toggle('leftSideBar');
console.log('hide : ' + toggleSidebar.hide);
}
});
mainApp.controller('sidebarCtrl', function($scope, toggleSidebar) {
$scope.hide = toggleSidebar.hide;
});
Any help is greatly appreciated.
The problem was, "Any changes in the service parameter wasn't reflecting sidebarCtrl controller."
I can't pinpoint the reason, but the bonding somehow wasn't 2-way, although I expected it to be
The below code helped
mainApp.controller('sidebarCtrl', function($scope, toggleSidebar) {
$scope.hide = function(){
return toggleSidebar.hide;
};
});
here is my html:
<md-tabs md-dynamic-height >
<div>
<md-tab label="Tab 1">
</md-tab>
<md-tab label="Tab 2" >
</md-tab>
<md-tab label="Tab 3" >
</md-tab>
</div>
</md-tabs>
Need to change labels color and border-bottom color when clicked on tab.
thanks in advance
The "border bottom" it's created using an <md-ink-bar>, here the default selector:
md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-barr{
color: rgb(255,82,82);
background: rgb(255,82,82);
}
here the label active/inactive:
md-tabs .md-tab.md-active{
color: rgb(16,108,200);
}
md-tabs.md-default-theme .md-tab, md-tabs .md-tab{
color: rgba(0,0,0,0.54);
}
For a correct style customization you can create a custom theme that will override the standard colors without create custom css, check the DOC
add script and css.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$("div md-tab").click(function(){
$(this).addClass("active");
});
});
</script>
<style>
.active{
border-bottom: 1px solid #000;
color: #f44336;
}
</style>
I have two divs that I want to show on the page. The order of the two divs depends on the value of a variable on the scope.
The trivial way of doing this is by repeating the divs code twice in the page, each time in a different order:
<div class="option 1" ng-if="value">
<div class="div 1">
<p>"this is the content for div 1"</p>
</div>
<div class="div 2">
<p>"this is the content for div 2"</p>
</div>
</div>
<div class="option 2" ng-if="!value">
<div class="div 2">
<p>"this is the content for div 2"</p>
</div>
<div class="div 1">
<p>"this is the content for div 1"</p>
</div>
</div>
Is there another way to do this, without repeating the code?
If you do not support IE9 I guess you can use the flexbox order CSS property with a conditional class.
<div class="main">
<div ng-class="{after: !value}">this is the content for div 1</div>
<div class="fixed">this is the content for div 2</div>
</div>
And the CSS:
.main { display: flex; flex-direction: column; }
.fixed { order: 2; }
.after { order: 3; }
See the flexbox order in action: https://jsfiddle.net/a6eaov63/2/
UPDATE: You can move each <div> to external file and include it in proper order depending on value.
<ng-include src="value ? 'div1.html' : 'div2.html'"></ng-include>
<ng-include src="value ? 'div2.html' : 'div1.html'"></ng-include>
(function(angular) {
'use strict';
angular.module('orderDivs', [])
.controller('orderController', ['$scope', function($scope) {
//$scope.variable = true; //uncomment this line to reverse the div ..
$scope.divList = [{'div':'option 1','condition':'true', 'content':'THIS IS DIV 1111'},{'div':'option 2','condition':'false', 'content':'THIS IS DIV 2222'}]
if ($scope.variable){
$scope.divList = $scope.divList.reverse();
}
$scope.changeOrder = function(){
$scope.divList = $scope.divList.reverse();
}
}]);
})(window.angular);
<!-- in views -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="orderDivs">
<div ng-controller="orderController">
<input type="checkbox" ng-click="changeOrder()" ng-model="variable"/>
<div ng-repeat="opt in divList">
<div class="option" ng-model="opt.div" ng-if="opt.condition">
<div>
{{opt.content}}
</div>
</div>
</div>
</div>
</body>
</html>