I have an ng-repeat that displays a list of dates, and information about purchases on that dates.
HTML:
<div ng-repeat="data in MyData">
<p>
{{ data.purchasedOn.substring(6, data.purchasedOn.length - 2) | date:'dd/MM/yyyy' }}
</p>
<br>
<p>
{{ data.purchaseDescription }}
</p>
</div>
Which displays:
01/02/2013
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"
10/04/2014
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"
02/08/2014
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"
13/06/2014
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"
19/02/2013
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"
How can i only show the {{ data.purchaseDescription }} when purchasedOn is within the last 6 months from the current month?
Assuming that you want to show purchasedOn but not the description, you could use a function like this one described here to determine a date 6 months prior.
function addMonths(date, months) {
date.setMonth(date.getMonth() + months);
return date;
}
Then define a function to get a boolean show/hide value:
function shouldHide(purchasedOn){
var purchaseDate = Date.parse(purchasedOn);
var sixMonthsAgo = addMonths(new Date(), -6);
var hide = purchaseDate < sixMonthsAgo ? true : false;
return hide;
}
Now you can just use your function in an ng-hide in your <p> element
<p ng-hide={{shouldHide(data.purchasedOn)}}>
{{ data.purchaseDescription }}
</p>
EDIT
If you do just want to hide the entire element, you could make a filter function like this:
$scope.filterOldDates = function(date)
{
if(shouldHide(date)){
return false;
}
return true;
};
You would use it like this:
<div ng-repeat="data in MyData | filterOldDates">
Related
I am trying to store some of my data in a const variable. Like I am getting FAQ section data from an API call. Like this one, I have my data in restaurant.faq and there can be multiple data so I map through it and it is working perfectly. Suppose Now I have two questions and two answers and I am getting it perfectly.
{restaurant.faq?.map((f) => (
<ListGroup.Item key={f.id}>
Question - <strong>{f.question}</strong>
<br />
Answer - <strong>{f.answer}</strong>
</ListGroup.Item>
))}
But I want to pass the same question and answer from this restaurant.faq in a const variable
Like this in rows [{question, answer}] section. How Can I do this?
const data = {
title: "FAQ",
rows: [
{
question: "Lorem ipsum dolor sit amet,",
answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,
ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.
In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.
Fusce sed commodo purus, at tempus turpis.`,
},
{
question: "Nunc maximus, magna at ultricies elementum",
answer:
"Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam, vitae convallis ex tortor sed dolor.",
},
],
};
Update how to do the same with this one?
{restaurant.menu?.map((men) => (
<ListGroup.Item key={men.id}>
<Image src={men.image} alt={men.name} style={{height:'250px', width:'1800px'}} fluid />
</ListGroup.Item>
))}
const images = [
{
original: 'https://picsum.photos/id/1018/1000/600/',
},
{
original: 'https://picsum.photos/id/1015/1000/600/',
},
{
original: 'https://picsum.photos/id/1019/1000/600/',
},
];
You can do like this
const data = {
title: "FAQ",
rows: restaurant.faq?.map(({ question, answer}) => (
{ question,
answer
})
)
I have a functional component which has a useState that contains the information i want to display and the images.
const [images, setImages] = useState(
[
{
"index": 0,
"img": Volleyball,
"text": ' Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero ut dolorem dolore modi esse reprehenderit assumenda error aut ducimus, aliquam repudiandae aliquid deserunt voluptatum placeat fugit explicabo dignissimos cum tempore.'
},
{
"index": 1,
'img': Gaming,
"text": ' Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero ut dolorem dolore modi esse reprehenderit assumenda error aut ducimus, aliquam repudiandae aliquid deserunt voluptatum placeat fugit explicabo dignissimos cum tempore.'
},
{
'index': 2,
'img': Coding,
"text": ' Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero ut dolorem dolore modi esse reprehenderit assumenda error aut ducimus, aliquam repudiandae aliquid deserunt voluptatum placeat fugit explicabo dignissimos cum tempore.'
}
]
)
And this is the jsx that I have in the return body with a left button that prevImage function.
return (
<div className={classes.gallary}>
<div className={classes.direction}>
<button className={classes.leftArrow} onClick={prevImage}>Left</button>
<button className={classes.rightArrow} >Right</button>
</div>
<div className={classes.images}>
{images.map(current => {
return (
<div key={current.index}>
<img src={current.img} alt="" className={classes.image} />
</div>
)
})}
</div>
</div>
);
Here is the prevImage function :
const prevImage = () => {
const currentImgArray = [...images];
const sendToBack = currentImgArray.push(currentImgArray.pop());
setImages(sendToBack)
}
This is what it looks like before clicking the button and what I am trying to do is to place the first object as the last object in the array . If the function is called I get : "TypeError: images.map is not a function"
As has been pointed out, array::push returns the new length of the array, not an array. Basically you need to rotate the array left/right.
const prevImage = () => {
// moves last image to front of array
setImages(images => [images[images.length - 1], ...images.slice(0, -1)]);
};
const nextImage = () => {
// moves first image to end of array
setImages(images => [...images.slice(1), images[0]]);
};
Array.push returns new length of the array, so concat function is to be use on here:
const prevImage = () => {
const currentImgArray = [...images];
const sendToBack = currentImgArray.concat(currentImgArray.pop());
setImages(sendToBack)
}
Updated ans:
const prevImage = () => {
setImages(prevState => {const popArr = prevState.pop();
return prevState.concat(popArr);
})
}
Is there a way in Jekyll to add a string filter for {{ data[1] }} in this YAML hash, so that the comma after "amet" doesn't break the array?
- project:
-
name: Name
main:
- image: image.png, Lorem ipsum dolor sit amet, consectetur adipiscing elit., category, Main Category, placeholdertext
Edit: #marcanuy asked how data[1] is defined. It's the index location in a for loop, and I'm using it for an alt tag: alt="{{ data[1] | strip }}", so:
{% for main in project.main %}
{% assign main = site.data.catalog[0].project[0].main[0] %}
{% assign data = main.image|split:"," %}
Maybe you can simplify you catalog file structure.
_data/catalog.yml
Contains all projets in an array :
-
name: Name1
main:
image:
url: image1.png
alt: 1Lorem ipsum dolor sit amet, consectetur adipiscing elit.
category: 1Main Category
placeholderText: 1placeholdertext
-
name: Name2
main:
image:
url: image2.png
alt: 2Lorem ipsum dolor sit amet, consectetur adipiscing elit.
category: 2Main Category
placeholderText: 2placeholdertext
Now, you can get stuff with :
{% for project in site.data.catalog %}
{% assign mainImg = project.main.image %}
<img src="{{ site.base }}{{ maybe.img.path.from.config }}{{ mainImg.url }}" alt="{{ mainImg.alt }}">
{% endfor %}
Someone answers: create a new array with the first item removed (the name of the image) and the join the rest of the elements with a comma to restore the original text:
Image name: {{ data |first | strip }}
{% assign text = data | shift %}
Image text: {{ text | join: "," }}
Output:
Image name: image.png
Image text: Lorem ipsum dolor sit amet, consectetur adipiscing elit., category, Main Category, placeholdertext
Why I can't remove item from array posts?
html tag for delete item
html tag
<span ng-click="remove($index)"> delete</span>
//AngularJS method where I try to delete item
blog.remove = function(index) {
blog.posts.splice(index, 1);
};
//Angular array posts
blog.posts = [{
"title": "Blog Post One",
"comments": [
{
"body":"Lorem ipsum dolor sit amet, consectetur adipisicing elit. ",
"author": "trollguy87"
}
]}];
Where can be problem?
Try passing the item to the function and getting the index from the item.
As mentioned in the below thread.
How do I delete an item or object from an array using ng-click?
If you are using ng-repeat then this can help:
<div ng-repeat="key in posts"> <!-- This will use your blog.posts -->
<button ng-click="posts.splice($index, 1)">
{{key.title}}
</button>
</div>
im working in phonegap project with angularjs google maps (https://github.com/allenhwkim/angularjs-google-maps)
I need to change default icon marker with custom images.
This is my controller code:
core.js
// Map Markers Controller
app.controller('markersController', function($scope, $compile){
$scope.infoWindow = {
title: 'title',
content: 'content'
};
$scope.markers = [
{
'title' : 'Location #1',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7112, -74.213]
},
{
'title' : 'Location #2',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7243, -74.2014]
},
{
'title' : 'Location #3',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7312, -74.1923]
}
];
$scope.showMarker = function(event){
$scope.marker = $scope.markers[this.id];
$scope.infoWindow = {
title: $scope.marker.title,
content: $scope.marker.content
};
$scope.$apply();
$scope.showInfoWindow(event, 'marker-info', this.getPosition());
}
});
And this is my markers.html
<div ng-controller="markersController" class="map-fullscreen-container">
<map zoom="8" center="[-26.82, -54.84]" class="fullscreen">
<info-window id="marker-info">
<div ng-non-bindable="">
<strong class="markerTitle">{{ infoWindow.title }}</strong>
<div class="markerContent">
<p>{{ infoWindow.content }}</p>
</div>
</div>
</info-window>
<marker ng-repeat="(id, marker) in markers" id="{{ id }}"
position="{{marker.location}}"
on-click="showMarker(event, $index)" >
</marker>
</map>
</div>
If you only have one marker, you can set it up directly on your marker directive:
<marker ng-repeat="(id, marker) in markers" id="{{ id }}"
position="{{marker.location}}"
on-click="showMarker(event, $index)"
icon="yourIconUrl.png" >
</marker>
If you have different markers for each item, the first thing you need to do is to add the icon property to your items:
$scope.markers = [
{
'title' : 'Location #1',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7112, -74.213],
'icon' : 'yourIconUrl.png'
},
{
'title' : 'Location #2',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7243, -74.2014],
'icon' : 'yourIconUrl.png'
},
{
'title' : 'Location #3',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7312, -74.1923],
'icon' : 'yourIconUrl.png'
}
];
Then you need to use it on your html, by adding it to the marker directive:
<marker ng-repeat="(id, marker) in markers" id="{{ id }}"
position="{{marker.location}}"
on-click="showMarker(event, $index)"
icon="{{marker.icon}}" >
</marker>
That's it, hope that helps.
Please refer to the documentation for more info:
https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/docs/index.html