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>
Related
I want to to show a camera icon on center of the Image when hover like below pic,
My output is,
my code is,
import Avatar from '#mui/material/Avatar';
import CameraAltIcon from '#mui/icons-material/CameraAlt';
<Avatar
className='editProfile'
alt="Remy Sharp"
src="/assets/images/avatars/avatar_default.jpg"
sx={{
mx: 'auto',
width: 150,
height: 150,
border: '5px solid #f1f1f1',
boxShadow: '0px 0px 5px -2px',
alignItems: 'center',
'&:hover': {
filter: 'brightness(50%)',
'& $icon': {
display: 'block',
},
},
}}
/>
<CameraAltIcon className='icon'/>
Thanks in advance...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor, nisi a tristique vestibulum, nisl justo luctus quam, nec scelerisque est nunc ac dui. Cras sed dui ac enim elementum feugiat. Aliquam erat volutpat. Maecenas tempus, ipsum at ullamcorper efficitur, est lacus aliquet massa, non faucibus lacus lectus a est. Proin consequat, orci vel auctor interdum, libero libero ornare libero, a tempus felis diam ac ligula. Aliquam nec tempus nibh. Fusce vehicula est et leo consequat, at elementum lacus suscipit. In hac habitasse platea dictumst. Proin elementum libero auctor, scelerisque lacus non, facilisis eros. Ut vestibulum nibh sit amet lacus rutrum, sit amet euismod massa eleifend. Donec at efficitur metus. Suspendisse ultricies dolor vel lectus cursus, in cursus quam mollis.
I'm working on a new project, to build a React frontend for a Drupal 8 backend. When I issue a jsonapi query, like:
http://test.site/jsonapi/node/unit_descriptor/a95f6031-032d-4df0-83d3-42c2b6cc2f91
I get the following raw result:
"jsonapi": {
"version": "1.0",
"meta": {
"links": {
"self": {
"href": "http://jsonapi.org/format/1.0/"
}
}
}
},
"data": {
"type": "node--unit_content",
"id": "a95f6031-032d-4df0-83d3-42c2b6cc2f91",
"links": {
"self": {
"href": "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91?resourceVersion=id%3A250"
}
},
"attributes": {
"drupal_internal__nid": 221,
"drupal_internal__vid": 250,
"langcode": "en",
"revision_timestamp": "2020-03-21T18:18:01+00:00",
"revision_log": null,
"status": true,
"title": "Professional Practice",
"created": "2020-03-21T18:18:01+00:00",
"changed": "2020-03-26T17:42:21+00:00",
"promote": false,
"sticky": false,
"default_langcode": true,
"revision_translation_affected": true,
"path": {
"alias": null,
"pid": null,
"langcode": "en"
},
"field_intro": {
"value": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet tortor varius, luctus urna vel, consequat leo. Cras vulputate neque et sollicitudin rhoncus. Curabitur sed justo eros. Donec id odio blandit, aliquet augue id, porttitor est. Nullam molestie est nec lacus pretium blandit et ut risus. Vivamus suscipit tellus pharetra commodo gravida. Nam nec ex at massa finibus consectetur vehicula id urna. Phasellus nec porta quam, et sodales sapien. Integer id purus luctus, ornare eros a, pellentesque ligula. Donec nisl mi, consequat eget ligula nec, pharetra ultrices tortor. Duis dapibus egestas convallis.</p>\r\n\r\n<p>Nunc quam erat, accumsan eu odio iaculis, mollis congue ante. Vivamus auctor, sem ac imperdiet pellentesque, ligula ex fringilla nunc, et posuere massa nisi in arcu. Nam lacinia vel diam ac auctor. Aliquam mollis odio non neque aliquam rhoncus. Aliquam pellentesque dictum tincidunt. Donec interdum purus eu urna venenatis, eu sagittis risus viverra. Nam dictum at enim vitae tincidunt. Morbi pulvinar, risus eget venenatis tincidunt, mi velit molestie ligula, ac cursus enim dui in neque.</p>\r\n\r\n<p>Nulla facilisi. Sed malesuada imperdiet feugiat. Sed et tempus justo. In non erat ut enim consectetur porta. Vestibulum erat orci, congue vitae diam at, feugiat volutpat mauris. Phasellus viverra nisl eget nulla laoreet, id efficitur felis rhoncus. Quisque imperdiet, massa a tincidunt egestas, lectus urna auctor mi, quis dapibus risus purus et sem. Donec varius varius justo id luctus. Morbi nibh nibh, suscipit at pharetra non, tristique ac felis. Phasellus eu leo turpis. Suspendisse ac mattis velit. Mauris rhoncus nulla lectus, in sodales nulla congue a. Suspendisse euismod neque diam, vel tincidunt ex rhoncus in. Donec massa orci, tincidunt in malesuada eu, condimentum vel purus. Maecenas dapibus nulla magna, quis facilisis justo varius sit amet.<br />\r\n </p>\r\n",
"format": "full_html",
"processed": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet tortor varius, luctus urna vel, consequat leo. Cras vulputate neque et sollicitudin rhoncus. Curabitur sed justo eros. Donec id odio blandit, aliquet augue id, porttitor est. Nullam molestie est nec lacus pretium blandit et ut risus. Vivamus suscipit tellus pharetra commodo gravida. Nam nec ex at massa finibus consectetur vehicula id urna. Phasellus nec porta quam, et sodales sapien. Integer id purus luctus, ornare eros a, pellentesque ligula. Donec nisl mi, consequat eget ligula nec, pharetra ultrices tortor. Duis dapibus egestas convallis.</p>\n\n<p>Nunc quam erat, accumsan eu odio iaculis, mollis congue ante. Vivamus auctor, sem ac imperdiet pellentesque, ligula ex fringilla nunc, et posuere massa nisi in arcu. Nam lacinia vel diam ac auctor. Aliquam mollis odio non neque aliquam rhoncus. Aliquam pellentesque dictum tincidunt. Donec interdum purus eu urna venenatis, eu sagittis risus viverra. Nam dictum at enim vitae tincidunt. Morbi pulvinar, risus eget venenatis tincidunt, mi velit molestie ligula, ac cursus enim dui in neque.</p>\n\n<p>Nulla facilisi. Sed malesuada imperdiet feugiat. Sed et tempus justo. In non erat ut enim consectetur porta. Vestibulum erat orci, congue vitae diam at, feugiat volutpat mauris. Phasellus viverra nisl eget nulla laoreet, id efficitur felis rhoncus. Quisque imperdiet, massa a tincidunt egestas, lectus urna auctor mi, quis dapibus risus purus et sem. Donec varius varius justo id luctus. Morbi nibh nibh, suscipit at pharetra non, tristique ac felis. Phasellus eu leo turpis. Suspendisse ac mattis velit. Mauris rhoncus nulla lectus, in sodales nulla congue a. Suspendisse euismod neque diam, vel tincidunt ex rhoncus in. Donec massa orci, tincidunt in malesuada eu, condimentum vel purus. Maecenas dapibus nulla magna, quis facilisis justo varius sit amet.<br />\n </p>\n"
},
"field_unit_code": null
},
"relationships": {
"node_type": {
"data": {
"type": "node_type--node_type",
"id": "ded1db75-f372-47cc-baba-5244e2571aa0"
},
"links": {
"related": {
"href": "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91/node_type?resourceVersion=id%3A250"
},
"self": {
"href": "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91/relationships/node_type?resourceVersion=id%3A250"
}
}
},
"revision_uid": {
"data": {
"type": "user--user",
"id": "c899de1e-9950-40b4-b879-635b63e14724"
},
"links": {
"related": {
"href": "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91/revision_uid?resourceVersion=id%3A250"
},
"self": {
"href": "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91/relationships/revision_uid?resourceVersion=id%3A250"
}
}
},
"uid": {
"data": {
"type": "user--user",
"id": "c899de1e-9950-40b4-b879-635b63e14724"
},
"links": {
"related": {
"href": "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91/uid?resourceVersion=id%3A250"
},
"self": {
"href": "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91/relationships/uid?resourceVersion=id%3A250"
}
}
},
"field_lo_ec_ac": {
"data": [
{
"type": "paragraph--lo_ec_ac",
"id": "286b325c-7538-4a39-8a94-cfc19faf1b93",
"meta": {
"target_revision_id": 3
}
},
{
"type": "paragraph--lo_ec_ac",
"id": "d18bdb1d-483d-418c-8bfd-b316afe799ac",
"meta": {
"target_revision_id": 5
}
},
{
"type": "paragraph--lo_ec_ac",
"id": "5de14184-0933-456a-b69a-6075021182dd",
"meta": {
"target_revision_id": 7
}
},
{
"type": "paragraph--lo_ec_ac",
"id": "44a82b1f-f79e-44af-9d10-5bda16d5be30",
"meta": {
"target_revision_id": 9
}
}
],
"links": {
"related": {
"href": "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91/field_lo_ec_ac?resourceVersion=id%3A250"
},
"self": {
"href": "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91/relationships/field_lo_ec_ac?resourceVersion=id%3A250"
}
}
},
"field_parent_unit": {
"data": [
{
"type": "node--unit_descriptor",
"id": "d79d581b-9b8d-42de-8dbd-82ecbf94287c"
}
],
"links": {
"related": {
"href": "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91/field_parent_unit?resourceVersion=id%3A250"
},
"self": {
"href": "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91/relationships/field_parent_unit?resourceVersion=id%3A250"
}
}
}
}
},
"links": {
"self": {
"href": "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91"
}
}
}
But, when I run this code in my React:
super()
this.state={
loading:false,
unitContent:{}
}
}
componentDidMount(){ axios.get(`http://test.site/jsonapi/node/unit_content/${this.props.id}`)
.then(
response =>{
const unitContent = response.data;
this.setState({unitContent})
}, error => {
console.log(error)
}
)
}
...
console.log(this.state.UnitContent)
And, then run console.log(this.state.unitContent) I get four results (two are null, and two are the same)
[Log] {}
[Log] {}
[Log] {jsonapi: Object, data: Object, links: {self: {href: "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91"}}}
[Log] {jsonapi: Object, data: Object, links: {self: {href: "http://test.site/jsonapi/node/unit_content/a95f6031-032d-4df0-83d3-42c2b6cc2f91"}}}
Why am I getting two empty results, and two duplicates? There is only one record, so shouldn't there only be one return?
Any help, greatly appreciated (as I would then be able to stop including a ton of 'if' to deal with the blanks).
Thanks
i'm doing a layout with angular material, and i having trouble when i use the md-scroll-shrink attribute of the md-toolbar.
I'm looking the code of this repo: https://github.com/angular/material/pull/7763 and i copied but in my page i'm looking two scrollbars
The example is here: https://github.com/corentin-gautier/material/tree/f7d9980fe4e61c7efa8bb31bf5505da930cc0b35/src/components/tabs/demoToolbarTabs
My code is this:
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 260px !important;
max-width: 260px !important;
}
md-tabs-canvas {
background-color: rgb(76,175,80);
}
md-tabs .md-tab {
color: white;
}
md-tabs .md-tab.md-active{
color: white;
}
md-tabs md-ink-bar {
color: white;
background: white;
}
</style>
</head>
<body ng-app="app" ng-cloak>
<div layout="row" flex layout-fill>
<md-sidenav layout="column"
class="md-sidenav-left md-whiteframe-z2"
md-component-id="left"
md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar>
<span>Toolbar</span>
</md-toolbar>
<md-content layout="column" flex>
</md-content>
</md-sidenav>
<div layout="column" ng-cloak layout-fill>
<md-content>
<div layout="column">
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<md-button aria-label="back button" hide-gt-md class="md-icon-button">
<md-icon>menu</md-icon>
<md-icon>arrow_back</md-icon>
</md-button>
<h2>Toolbar & tabs with shrink</h2>
</div>
</md-toolbar>
<md-tabs layout-fill>
<md-tab
label="tab">
<div>
<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. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis 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>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
<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>
<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. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis 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>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
<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>
<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. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis 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>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
<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>
<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. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis 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>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
<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>
</div>
</md-tab>
</md-tabs>
</div>
</md-content>
</div>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
(function() {
'use strict';
angular.module('app', [
'ngMaterial',
'app.config'
]);
angular.module('app.config', []);
/*
angular
.module('app.config')
.config(themeConfig);
themeConfig.$inject = ['$mdThemingProvider'];
function themeConfig($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('red')
.accentPallette('red');
}
*/
angular
.module('app.config')
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('green')
.accentPalette('green');
});
})();
</script>
</body>
</html>
The issue is: In the web page appears two scrollbar and shrink not work until the scroll of tabs is down.
If someone can help me.
Thanks in advice.
Here's an example of your content working as it should - CodePen
Here's an example of how I think you want it to work - CodePen
According to the docs, the md-toolbar must be a sibling of md-content:
so the shrink won't work with the md-tabs in your setup.
Markup
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<h2>Toolbar & tabs with shrink</h2>
</div>
</md-toolbar>
<md-content id="myContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing el
...
</p>
<md-content>
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>
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!