I'm just learning angular and have a problem i just can't figure out how to solve it.
I'm trying to achieve the following.
Tab A / Tab B / Tab C
.................................
Content in a fixed height Container
When i click a tab, some content is loaded via json and displayed in the container. Since its a lot of content i get a scrollbar.
What i want to do now is: Store the scrollTop Position for each Tab, so you can continue reading where you left when you switch tabs.
At the moment i have a directive on the content div, that triggers whenever the div gets scrolled, and stores the scrollTop Position in an array, related to the tab that is currently active.
app.directive("scrollPosition", function(){
return{
restrict: 'A',
link: function(scope , element){
element.bind("scroll", function(){
scope.scrollPosition[scope.tab.categoryIndex]=element.scrollTop();
});
}
}
})
This works so far.
But i have no clue how to use this stored ScrollTop Value to set the div to that position when i click of one of the tabs.
Whats the proper angular way?
Using an ng-click on the tabs and then scroll the div?
Using something like a $watch inside the directive to see which tab is clicked?
Help would be much appreciated, since i could only find examples where the whole document was scrolled, which is easy to address. But i just don't know how to get this relationship between the tab buttons and the div.
Thanks
Markus
Look into $anchorScroll. You can set a yOffset on it before call the function.
$anchorScroll.yOffset = 122;
$anchorScroll();
https://docs.angularjs.org/api/ng/service/$anchorScroll
Update:
So I solved this. My first answer was too hasty.
Here is a link to plnkr(also embedded into post though): http://embed.plnkr.co/kwPkFDfyJctfPRFPPLyk
Scroll the first tab, click on the second tab, then back in the first.
I added a pos variable to the isolate scope of the directive and passed in scope variables from the main controller. This way the directive can set the scroll position on a two-way bound variable. The next time the tab is clicked on, the directive sets its the scroll position on its element to the last scrolled to position via its scope.pos variable. Hope this helps!
(function() {
'use strict';
var app = angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function($scope) {
$scope.tabs = [{
"title": 'One',
"url": 'one.tpl.html',
"pos": 0
}, {
"title": 'Two',
"url": 'two.tpl.html',
"pos": 0
}, {
"title": 'Three',
"url": 'three.tpl.html',
"pos": 0
}];
$scope.$watch('tabs', function(val) {
console.log("Yay!!! It's working! Val=" + val[0].pos);
}, true);
$scope.currentTab = $scope.tabs[0];
$scope.onClickTab = function(tab) {
$scope.currentTab = tab;
};
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab.url;
};
}]);
app.directive("scrollPosition", function() {
return {
restrict: 'A',
scope: {
pos: "="
},
transclude: false,
link: function(scope, element) {
element[0].onscroll = function() {
scope.pos = element[0].scrollTop;
console.log(scope.pos);
scope.$apply();
};
element[0].scrollTop = scope.pos;
}
};
});
})();
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
border: 1px solid #000;
border-bottom-width: 0;
margin: 3px 3px 0px 3px;
padding: 5px 5px 0px 5px;
background-color: #CCC;
color: #696969;
}
#mainView {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
#viewOne, #viewTwo, #viewThree {
overflow: scroll;
height: 200px;
}
.active {
background-color: #FFF;
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-app="TabsApp">
<div id="tabs" ng-controller="TabsCtrl">
<ul>
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab.url"></div>
{{currentTab.pos}}
</div>
<script type="text/ng-template" id="one.tpl.html">
<div id="viewOne" scroll-position pos="currentTab.pos">
<h1>View One</h1>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div id="viewTwo" scroll-position pos="currentTab.pos">
<h1>View Two</h1>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu.</p>
</div>
</script>
<script type="text/ng-template" id="three.tpl.html">
<div id="viewThree" scroll-position pos="currentTab.pos">
<h1>View Three</h1>
<p>In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet
arcu. Class aptent taciti sociosqu.</p>
</div>
</script>
</div>
</div>
</body>
</html>
Related
what I am doing: creating SSG using nextjs 13 but still using pages folder structure, I am building and exporting the site with next export and planned to host it as static.
What I want to do: I want to make a time and add it to my header as client rendered, for example user request for the page at november, 01, 2023 9pm, I want to display november, 01, 2023 9pm, then at reload I want it to be updated on what time it is requested
What I did: tried many approach, add "use client" on the top of the time component, used useEffect also, named the component DateNow.client.tsx. still not working, the date displayed is the date the build or the next export happen.
any idea
this is the component
"use client";
import { useState, useEffect } from "react";
type Props = {};
export default function DateNow({}: Props) {
useEffect(() => {
const date = new Date();
const day = String(date.getDay());
const month = String(date.getMonth());
const year = String(date.getFullYear());
const second = String(date.getUTCSeconds());
setFullDate({ day, month, year, second });
}, []);
const [fullDate, setFullDate] = useState({
day: String(new Date().getDay()),
month: String(new Date().getMonth()),
year: String(new Date().getFullYear()),
second: String(new Date().getUTCSeconds()),
});
return (
<div>
{fullDate.day} - {fullDate.month} - {fullDate.year} - {fullDate.second}
</div>
);
}
this is how I included it
import React from "react";
import DateNow from "./DateNow.client";
type Props = {};
export default function Header({}: Props) {
return (
<header>
Header <DateNow />
</header>
);
}
this is the export output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="next-head-count" content="2" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="true"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="preload"
href="/_next/static/css/4456f66f8b03e6d5.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/4456f66f8b03e6d5.css"
data-n-g=""
/>
<noscript data-n-css=""></noscript>
<script
defer=""
nomodule=""
src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"
></script>
<script
src="/_next/static/chunks/webpack-8fa1640cc84ba8fe.js"
defer=""
></script>
<script
src="/_next/static/chunks/framework-8c5acb0054140387.js"
defer=""
></script>
<script
src="/_next/static/chunks/main-b482fffd82fa7e1c.js"
defer=""
></script>
<script
src="/_next/static/chunks/pages/_app-3893aca8cac41098.js"
defer=""
></script>
<script
src="/_next/static/chunks/pages/article/%5Bslug%5D-e681ee69432676d8.js"
defer=""
></script>
<script
src="/_next/static/KeigBc207aj9hxoHz3XH_/_buildManifest.js"
defer=""
></script>
<script
src="/_next/static/KeigBc207aj9hxoHz3XH_/_ssgManifest.js"
defer=""
></script>
<style
data-href="https://fonts.googleapis.com/css2?family=Lato&family=Merriweather&display=swap"
>
#font-face {
font-family: "Lato";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHvxo.woff)
format("woff");
}
#font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5OeA.woff)
format("woff");
}
#font-face {
font-family: "Lato";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
#font-face {
font-family: "Lato";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wXiWtFCc.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
#font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-cSZMdeX3rsHo.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF,
U+A640-A69F, U+FE2E-FE2F;
}
#font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-eCZMdeX3rsHo.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
#font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-cyZMdeX3rsHo.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
#font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-ciZMdeX3rsHo.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
#font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
</head>
<body>
<div id="__next">
<div class="container font-sans">
<header>
Header
<!-- -->2 - 0 - 2023 - 4
</header>
<div>
<div>
<img
src="/images/screen_0_2752e34ba5_original.webp"
alt="screen-0.webp"
/>
</div>
<div class="text-5xl">
How To Climb The Career Latter And Don’t Waste Your Youth
</div>
<div class="text-xl">
Morbi fermentum purus metus, eu consequat est congue ut. Proin ut
eros ac tortor imperdiet convallis nec eu dui. Curabitur sed
fermentum arcu. Vestibulum sed egestas purus. Donec dapibus
malesuada eros quis suscipit. Praesent fermentum ipsum nec elit
finibus, at cursus augue maximus. Praesent blandit efficitur
bibendum. Integer tincidunt iaculis nunc, eget pharetra sem eleifend
faucibus. Sed fermentum massa vitae sapien sodales, quis feugiat
dolor condimentum. Aliquam eget leo nunc. Quisque ut nisi vulputate,
euismod sem at, mollis leo. Vestibulum et tincidunt ex. In dignissim
ex ante, a porta nisi rhoncus ut. Pellentesque dictum blandit elit,
finibus suscipit tortor luctus ut. Sed aliquet leo id lacus feugiat,
et molestie ante pretium. Proin nec augue et velit tincidunt
feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Mauris blandit eros a mi pharetra
molestie ut efficitur libero. Donec ut luctus risus. In ut
condimentum nibh. Nunc eu porta ligula. Aliquam erat volutpat.
Maecenas sodales lectus vitae est tincidunt consequat.
</div>
<div class="text-xl">
Proin id ultricies justo, fringilla pharetra enim. Phasellus
vehicula pretium malesuada. Proin dolor enim, suscipit vitae luctus
non, maximus malesuada odio. Phasellus condimentum tellus eget quam
egestas, a lobortis mauris venenatis. Vestibulum id leo quis felis
suscipit pulvinar. Duis aliquam mi urna, eu bibendum ante convallis
eu. Praesent sit amet enim purus. Sed egestas pretium purus id
consectetur. Fusce gravida ipsum tellus, quis pharetra lorem
volutpat a. Proin feugiat tincidunt mattis. Integer laoreet nulla
vel viverra semper. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Maecenas facilisis
felis lorem, quis tempus nisi sagittis sit amet. In bibendum sodales
risus, at convallis mi pellentesque sit amet. Morbi magna mauris,
condimentum non interdum sed, tincidunt vitae odio. Fusce maximus
mauris nec ex mattis, sed maximus enim gravida. Maecenas sit amet
metus odio. Vivamus interdum orci nibh, non tincidunt eros vulputate
non. Ut gravida nulla nunc. Ut facilisis odio eget est blandit
egestas.
</div>
</div>
</div>
</div>
<script id="__NEXT_DATA__" type="application/json">
{
"props": {
"pageProps": {
"id": 2,
"attributes": {
"title": "How To Climb The Career Latter And Don’t Waste Your Youth",
"slug": "how-to-climb-the-career-latter-and-don-t-waste-your-youth",
"description": "Morbi fermentum purus metus, eu consequat est congue ut. Proin ut eros ac tortor imperdiet convallis nec eu dui.",
"introduction": "Morbi fermentum purus metus, eu consequat est congue ut. Proin ut eros ac tortor imperdiet convallis nec eu dui. Curabitur sed fermentum arcu. Vestibulum sed egestas purus. Donec dapibus malesuada eros quis suscipit. Praesent fermentum ipsum nec elit finibus, at cursus augue maximus. Praesent blandit efficitur bibendum. Integer tincidunt iaculis nunc, eget pharetra sem eleifend faucibus. Sed fermentum massa vitae sapien sodales, quis feugiat dolor condimentum. Aliquam eget leo nunc. Quisque ut nisi vulputate, euismod sem at, mollis leo.\n\nVestibulum et tincidunt ex. In dignissim ex ante, a porta nisi rhoncus ut. Pellentesque dictum blandit elit, finibus suscipit tortor luctus ut. Sed aliquet leo id lacus feugiat, et molestie ante pretium. Proin nec augue et velit tincidunt feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris blandit eros a mi pharetra molestie ut efficitur libero. Donec ut luctus risus. In ut condimentum nibh. Nunc eu porta ligula. Aliquam erat volutpat. Maecenas sodales lectus vitae est tincidunt consequat.",
"content": "Proin id ultricies justo, fringilla pharetra enim. Phasellus vehicula pretium malesuada. Proin dolor enim, suscipit vitae luctus non, maximus malesuada odio. Phasellus condimentum tellus eget quam egestas, a lobortis mauris venenatis. Vestibulum id leo quis felis suscipit pulvinar. Duis aliquam mi urna, eu bibendum ante convallis eu. Praesent sit amet enim purus. Sed egestas pretium purus id consectetur.\n\nFusce gravida ipsum tellus, quis pharetra lorem volutpat a. Proin feugiat tincidunt mattis. Integer laoreet nulla vel viverra semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas facilisis felis lorem, quis tempus nisi sagittis sit amet. In bibendum sodales risus, at convallis mi pellentesque sit amet. Morbi magna mauris, condimentum non interdum sed, tincidunt vitae odio. Fusce maximus mauris nec ex mattis, sed maximus enim gravida. Maecenas sit amet metus odio. Vivamus interdum orci nibh, non tincidunt eros vulputate non. Ut gravida nulla nunc. Ut facilisis odio eget est blandit egestas.",
"keywords": ["sample", "tagssample", "anothersampletag"],
"links": null,
"date": null,
"createdAt": "2022-12-11T02:12:02.858Z",
"updatedAt": "2023-01-16T21:24:20.921Z",
"publishedAt": "2022-12-11T02:52:06.237Z",
"images": {
"data": [
{
"id": 3,
"attributes": {
"name": "screen-0.webp",
"alternativeText": "screen-0.webp",
"caption": "screen-0.webp",
"width": 600,
"height": 1024,
"formats": {
"large": {
"ext": ".webp",
"url": "/uploads/large_screen_0_2752e34ba5.webp",
"hash": "large_screen_0_2752e34ba5",
"mime": "image/webp",
"name": "large_screen-0.webp",
"path": null,
"size": 39.71,
"width": 586,
"height": 1000
},
"small": {
"ext": ".webp",
"url": "/uploads/small_screen_0_2752e34ba5.webp",
"hash": "small_screen_0_2752e34ba5",
"mime": "image/webp",
"name": "small_screen-0.webp",
"path": null,
"size": 18.08,
"width": 293,
"height": 500
},
"medium": {
"ext": ".webp",
"url": "/uploads/medium_screen_0_2752e34ba5.webp",
"hash": "medium_screen_0_2752e34ba5",
"mime": "image/webp",
"name": "medium_screen-0.webp",
"path": null,
"size": 28.94,
"width": 439,
"height": 750
},
"thumbnail": {
"ext": ".webp",
"url": "/uploads/thumbnail_screen_0_2752e34ba5.webp",
"hash": "thumbnail_screen_0_2752e34ba5",
"mime": "image/webp",
"name": "thumbnail_screen-0.webp",
"path": null,
"size": 4.03,
"width": 91,
"height": 156
}
},
"hash": "screen_0_2752e34ba5",
"ext": ".webp",
"mime": "image/webp",
"size": 44.81,
"url": "/uploads/screen_0_2752e34ba5.webp",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2022-12-26T17:13:57.779Z",
"updatedAt": "2022-12-26T17:13:57.779Z"
}
}
]
}
},
"src": "screen_0_2752e34ba5_original.webp"
},
"__N_SSG": true
},
"page": "/article/[slug]",
"query": {
"slug": "how-to-climb-the-career-latter-and-don-t-waste-your-youth"
},
"buildId": "KeigBc207aj9hxoHz3XH_",
"isFallback": false,
"gsp": true,
"scriptLoader": []
}
</script>
</body>
</html>
I am trying angular + scrollbar [https://github.com/iominh/ng-scrollbars], however not able to make it work.
It just gives module error and show text.
in codepen it doesn't even show text.
any help Plunker and codepan
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.min.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://raw.githubusercontent.com/iominh/ng-scrollbars/master/src/scrollbars.js"></script>
<script>
var app = angular.module('app', ['ngScrollbars']);
app.config(function(ScrollBarsProvider) {
// scrollbar defaults
ScrollBarsProvider.defaults = {
autoHideScrollbar: false,
setHeight: 100,
scrollInertia: 0,
axis: 'yx',
advanced: {
updateOnContentResize: true
},
scrollButtons: {
scrollAmount: 'auto', // scroll amount when button pressed
enable: true // enable scrolling buttons by default
}
};
});
function MainController($scope) {
// example of overriding defaults per scrollbar
$scope.scrollbarConfig = {
theme: 'dark',
scrollInertia: 500
}
}
app.controller('mainCtrl', MainController);
</script>
</head>
<body ng-app="app" ng-controller="mainCtrl">
<div style="width: 200px;" ng-scrollbars ng-scrollbars-config="scrollbarConfig">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare magna ultrices tincidunt tincidunt. Donec sagittis lorem placerat iaculis vehicula. Nunc bibendum quam vel rutrum rutrum. Duis nunc dolor, vehicula vitae pulvinar eu, semper vitae eros.
Proin auctor, felis placerat posuere dictum, massa ipsum fermentum ipsum, sit amet tincidunt metus justo ut dui. Curabitur aliquet tempor dolor eget volutpat. Proin consequat metus id justo interdum, id porta justo venenatis. Nullam vel tristique
neque, at luctus velit. Nulla sit amet convallis felis.
</div>
</body>
</html>
Updated your codepen with 3 changes: codepen
Updated link to ngscrollbars file: github doesn't allow the files to be used as script directly, change host to rawgit.com will do
https://rawgit.com/iominh/ng-scrollbars/master/src/scrollbars.js
You misspelled the directive: ng-scrollbars (note the last 's')
The height CSS needs to be in the same level with the directive.
<ul ng-scrollbars style = "height: 100px;">
The filter result only shows with in the numPerPage result because of Angular UI Bootstrap's pagination. Is there any option to show filter result from the $scope.expenses as filter result ?
Demo: http://codepen.io/athimannil/pen/zGbBqR
angular.module('mytodos', ['ui.bootstrap']).controller('TodoController', function($scope) {
/* paggination */
if (localStorage.getItem("itemPerPage") === null) {
localStorage.setItem("itemPerPage", 10);
}
function getPerPage(){
return parseInt(localStorage.itemPerPage);
}
$scope.changeNum = function (itemNum) {
localStorage.itemPerPage = itemNum;
$scope.numPerPage = getPerPage();
};
console.log(localStorage.itemPerPage);
$scope.numsForPage = [5, 10, 25, 50, 100];
$scope.currentPage = 1;
$scope.numPerPage = getPerPage();
$scope.maxSize = 5;
$scope.filteredTodos = [];
$scope.currentPage = 1;
$scope.numPerPage = 10;
$scope.maxSize = 5;
$scope.expenses = [
{
"id": 1,
"name": "Warren Phillips",
"amount": "37.47",
"date": "12/11/2015",
"description": "blandit. Nam nulla magna, malesuada vel, convallis in, cursus et, eros. Proin ultrices. Duis volutpat nunc sit amet metus. Aliquam erat volutpat. Nulla facilisis. Suspendisse commodo tincidunt nibh. Phasellus nulla. Integer vulputate, risus a ultricies adipiscing, enim mi tempor lorem, eget mollis lectus pede et risus. Quisque libero lacus, varius et, euismod et, commodo at, libero. Morbi accumsan"
}, {
"id": 2,
"name": "Declan Ayala",
"amount": "29.18",
"date": "12/17/2014",
"description": "Integer eu lacus. Quisque imperdiet, erat nonummy ultricies ornare, elit elit fermentum risus, at fringilla purus mauris a nunc. In at pede. Cras"
}, {
"id": 3,
"name": "Ivana Bell",
"amount": "88.53",
"date": "11/20/2014",
"description": "Etiam imperdiet dictum magna. Ut tincidunt orci quis lectus. Nullam suscipit, est ac facilisis facilisis, magna tellus faucibus leo, in lobortis tellus justo sit amet nulla."
}, {
"id": 4,
"name": "Brennan Noel",
"amount": "17.76",
"date": "02/06/2015",
"description": "velit eu sem. Pellentesque ut ipsum ac mi eleifend egestas. Sed pharetra, felis"
}, {
"id": 5,
"name": "Thomas Tran",
"amount": "29.59",
"date": "08/20/2014",
"description": "nisl sem, consequat nec, mollis vitae, posuere at, velit. Cras lorem lorem, luctus ut, pellentesque eget, dictum placerat, augue. Sed molestie. Sed id risus quis diam luctus lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris ut quam vel sapien imperdiet ornare."
}, {
"id": 6,
"name": "Tucker Bolton",
"amount": "66.69",
"date": "12/09/2014",
"description": "et risus. Quisque libero lacus, varius et, euismod et, commodo at, libero. Morbi accumsan laoreet ipsum. Curabitur consequat, lectus sit amet luctus vulputate, nisi sem semper erat, in consectetuer ipsum nunc id enim. Curabitur massa. Vestibulum accumsan neque et nunc. Quisque ornare tortor at risus. Nunc ac sem ut dolor dapibus gravida. Aliquam tincidunt, nunc ac mattis ornare, lectus ante dictum mi, ac mattis velit justo nec ante. Maecenas mi felis, adipiscing fringilla, porttitor vulputate, posuere vulputate, lacus. Cras interdum."
}, {
"id": 7,
"name": "Medge Mullen",
"amount": "23.78",
"date": "10/17/2015",
"description": "dictum mi, ac mattis velit justo nec ante. Maecenas mi felis, adipiscing fringilla, porttitor vulputate, posuere vulputate, lacus. Cras interdum. Nunc sollicitudin commodo ipsum. Suspendisse non leo. Vivamus nibh dolor, nonummy ac, feugiat non, lobortis quis, pede. Suspendisse dui. Fusce diam nunc, ullamcorper eu, euismod ac, fermentum vel, mauris. Integer sem elit, pharetra ut, pharetra sed, hendrerit a, arcu. Sed et"
}, {
"id": 8,
"name": "Morgan Merritt",
"amount": "54.09",
"date": "04/10/2016",
"description": "Nulla facilisis. Suspendisse commodo tincidunt nibh. Phasellus nulla. Integer vulputate, risus a ultricies adipiscing, enim mi tempor lorem, eget mollis lectus pede et risus. Quisque libero lacus, varius et, euismod et,"
}, {
"id": 9,
"name": "Janna Casey",
"amount": "22.61",
"date": "08/05/2015",
"description": "eros turpis non enim. Mauris quis turpis vitae purus gravida sagittis. Duis gravida. Praesent eu nulla at sem molestie sodales. Mauris blandit enim consequat purus. Maecenas libero est, congue a, aliquet vel, vulputate eu, odio. Phasellus at augue id ante dictum"
}, {
"id": 10,
"name": "Buffy Best",
"amount": "59.98",
"date": "05/06/2015",
"description": "lacus vestibulum lorem, sit amet ultricies sem magna nec quam. Curabitur vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dignissim magna a tortor. Nunc commodo auctor velit. Aliquam nisl. Nulla eu neque pellentesque massa lobortis ultrices. Vivamus rhoncus. Donec est. Nunc ullamcorper, velit in aliquet lobortis, nisi nibh lacinia orci, consectetuer euismod est arcu ac orci. Ut semper pretium neque. Morbi quis urna."
}, {
"id": 11,
"name": "Brielle Newman",
"amount": "52.26",
"date": "04/16/2016",
"description": "placerat, augue. Sed molestie. Sed id risus quis diam luctus lobortis."
}, {
"id": 12,
"name": "Julie James",
"amount": "6.38",
"date": "08/15/2014",
"description": "placerat, orci lacus vestibulum lorem, sit amet ultricies sem magna nec quam. Curabitur vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dignissim magna a tortor. Nunc commodo auctor velit. Aliquam nisl. Nulla eu neque"
}, {
"id": 13,
"name": "Shaine Barnett",
"amount": "0.04",
"date": "09/29/2014",
"description": "laoreet, libero et tristique pellentesque, tellus sem mollis dui, in sodales elit erat vitae risus. Duis a mi fringilla mi lacinia mattis. Integer eu lacus. Quisque imperdiet, erat nonummy ultricies ornare, elit elit fermentum risus, at fringilla purus mauris a nunc. In at pede. Cras vulputate velit eu sem. Pellentesque ut ipsum ac mi eleifend egestas. Sed"
}, {
"id": 14,
"name": "Genevieve Underwood",
"amount": "50.71",
"date": "09/24/2015",
"description": "consequat auctor, nunc nulla vulputate dui, nec tempus mauris erat eget ipsum. Suspendisse sagittis. Nullam vitae diam. Proin dolor. Nulla semper"
}, {
"id": 15,
"name": "Adam Villarreal",
"amount": "18.48",
"date": "04/06/2016",
"description": "nisl. Maecenas malesuada fringilla est. Mauris eu turpis. Nulla aliquet. Proin velit. Sed malesuada augue ut lacus. Nulla tincidunt, neque vitae semper egestas, urna justo faucibus lectus, a sollicitudin orci sem eget massa. Suspendisse eleifend. Cras sed leo. Cras vehicula aliquet libero. Integer in magna. Phasellus dolor elit, pellentesque a, facilisis non, bibendum sed, est. Nunc laoreet lectus quis massa. Mauris"
}
];
}).filter('pagination', function() {
return function(input, currentPage, pageSize) {
if(angular.isArray(input)) {
var start = (currentPage-1)*pageSize;
var end = currentPage*pageSize;
return input.slice(start, end);
}
};
});
.box {
border: 1px solid #DDD;
padding: 10px;
position: relative;
background: #FFF;
margin: 0 0 10px;
}
.tab-content > .tab-pane > .box {
border-top: none;
}
.tab-content > .box {
border-top: none;
}
select.pagiantion{
width: auto;
display: inline-block;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<div ng-app="mytodos" ng-controller="TodoController">
<div class="container">
<hr />
<tabset>
<tab>
<tab-heading>Statement</tab-heading>
<div class="box">
<h1>Todos</h1>
<h4>{{expenses.length}} total</h4>
<div class="row">
<div class="col-md-6">
<label for="">Show
<select class="form-control pagiantion" ng-model="numPerPage" ng-options="numPage for numPage in numsForPage" ng-change="changeNum(numPerPage);"></select>
entries
</label>
</div>
<div class="col-md-6 text-right">
<div class="form-inline form-group">
<label for="filter-list">Search </label>
<input type="text" class="form-control" id="filter-list" placeholder="Search" ng-model="filterlist">
</div>
</div>
</div>
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>Name</th>
<th>Amount</th>
<th>Date</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="expense in expenses | pagination: currentPage : numPerPage | filter:filterlist">
<td>{{expense.name}}</td>
<td>{{expense.amount}}</td>
<td>{{expense.date}}</td>
<td>
<div class="btn-group btn-group-xs" role="group" ng-init="editmode=false">
<button type="button" class="btn btn-default" ng-click="editExpense(expense);">
<i class="fa fa-pencil"></i>
</button>
<button type="button" class="btn btn-default" ng-click="deleteExpense(expense); editmode = !editmode">
<i class="fa fa-trash-o"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="clearfix" ng-show="expenses.length > numPerPage">
<pagination
ng-model="currentPage"
total-items="expenses.length"
max-size="maxSize"
items-per-page="numPerPage"
boundary-links="true"
class="pagination-sm pull-right"
previous-text="‹"
next-text="›"
first-text="«"
last-text="»"
></pagination>
</div>
</div>
</tab>
</tabset>
</div>
</div>
I think you want to store a filtered list in a variable then use it length to make pagination.
HTML
Table tr area.
<tr ng-repeat="expense in filteredlist = (expenses | filter:filterlist) |pagination: currentPage : numPerPage">
And in pagination
<pagination
ng-model="currentPage"
total-items="filteredlist.length"
max-size="maxSize"
items-per-page="numPerPage"
boundary-links="true"
class="pagination-sm pull-right"
previous-text="‹"
next-text="›"
first-text="«"
last-text="»"
></pagination>
Then add filteredlist variable in $scope. Initially just copy entire expense to this variable.
JS
$scope.filteredlist =$scope.expenses;
Your fixed code
Change the order of your filters like:
expense in expenses | filter:filterlist | pagination: currentPage : numPerPage
Hope it helps!
I would like to Make <md-tab>s as Wizard by adding Next Button.
i added My code and created a Plunker with next Buttons Could guys take a look please add your code to make it wizard
Plunker Added :-
http://plnkr.co/edit/p9mMyaqqHWtVyAEeisd1?p=preview
<md-content class="md-padding">
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="one">
<md-content class="md-padding">
<h1 class="md-display-2">Tab One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
<md-button class="md-raised md-primary">Next</md-button>
</md-content>
</md-tab>
<md-tab label="two">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
<p>Lorem risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
<md-button class="md-raised md-primary">Next</md-button>
</md-content>
</md-tab>
<md-tab label="three">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Three</h1>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
<md-button class="md-raised md-primary">Finish</md-button>
</md-content>
</md-tab>
</md-tabs>
you have add an attribute to your md-tabs tag md-selected attribute to set the selected tab index ..
so first you have to add ng-controller
<md-content class="md-padding" ng-controller="tabCtrl">
after bind you have bind the value of selectedIndex
<md-tabs md-dynamic-height="" md-border-bottom="" md-selected="selectedIndex">
after you have to add ng-click to your button to call nextTab()
<md-button class="md-raised md-primary" ng-click="nextTab()">Next</md-button>
end of it ... here is the controller you need
// Code goes here
var moduler = angular.module('MyApp', ['ngMaterial']);
moduler.controller("tabCtrl", ['$scope', function($scope) {
$scope.max = 2;
$scope.selectedIndex = 0;
$scope.nextTab = function() {
var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
$scope.selectedIndex = index;
};
}]);
i hope this example helps you...
here is the example at plunker as you wish
http://plnkr.co/edit/iNEXWXUBDvsrKgUSelkW?p=preview
you could use the Wizard also which serves your cause
github Link :-
https://github.com/Matesign/material-wizard
sample code follows
<mt-wizard btn-progress-color="#D8D8D8" btn-bg-color="#FAFAFA" active-btn-bg-color="#E9E9E9" chevrons-always-visible="true" on-finish="submit()">
<mt-wz-step title="Step 1" step-img="step1.svg" on-exit="onExitStep1()">
</mt-wz-step>
</mt-wizard>
http://plnkr.co/edit/rp5qJykW2DD1A7EvaVZP?p=preview
The JQuery UI Accordion widget doesn't work with longer scrollable content in IE7 when any parent container div has overflow:auto; set on it. I tried setting the innermost child div of the Accordion to overflow:visible !important; but it didn't work. Works fine in IE8, IE9, IE9 compatibility mode, Chrome, FF, Opera, and Safari.
Test this fiddle in IE7. Be sure to explicity set IE to use "Browser mode: IE7" and "Document Mode: IE7 standards".
How to fix?
<div style="overflow:auto;">
<div id="accordion" style="overflow:visible;float:right;height:400px;width:500px;border:2px solid red;float:right;">
<h3>Section 1</h3>
<div>
<script type="text/javascript">
for (var i=0; i<10; i++)
{
document.write("<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>");
document.write("<ul>");
document.write("<li>List item one</li>");
document.write("<li>List item two</li>");
document.write("<li>List item three</li>");
document.write("</ul>");
}
</script>
</div>
<h3>Section 2</h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
</div>
</div>
So it turns out it's a bug in the current version of jqueryui accordion.
See the jqueryui bug report here.