I'm using Ionic framework for my new application.
I have an issue, I want to know how it would be possible to insert views dynimacally.
I make a request to the server requesting news, the response in in JSON which look like :
{
"title":"news 1",
"image":"http://www.server.com/news_image1.png",
"description":"news_description"
},
{
"title":"news 2",
"image":"http://www.server.com/news_image2.png",
"description":"news_description"
},
{
"title":"news 3",
"image":"http://www.server.com/news_image3.png",
"description":"news_description"
}
I want to insert data dynmaically to the ion-view and be able to swipe between the news like the image below :
So if you just have an idea how can that be possible !
You could do a slide box and the use a ng-repeat to dynamically create slides. Although if you are making a bunch of slides i would use collection repeat. Check out slide boxes here http://ionicframework.com/docs/api/directive/ionSlideBox/ . and ng-repeat and collectio-repeat here and here https://docs.angularjs.org/api/ng/directive/ngRepeat , http://ionicframework.com/docs/api/directive/collectionRepeat/
Related
Need to render ACF repeater in react. I am able to display ACF text Fields but not repeater fields. Need to find out if anyone has an example of how to map through a repeater field.
Repeater field group Is called Skills.
Im also new in this stuff, but I will try to help you.
So, the first thing that you need is to download and install ACF to REST API plugin so you can use ACF with Wordpress API. I assume, that you already have it, because as you said before - you can display text fields.
Once you can send data through Wordpress API, you need to preview of JSON sent by Wordpress (in this case), so you can display necessary data. Mine is called React Developer Tools and I installed it as Chrome extension.
Link to Chrome store
It should look like this:
As you can see, my component is called Home.js, yours may be called differently. Chose component that is fetching all the data that you need.
Now, you just need to use your repeater. It would be much easier if you showed us your code. I don't really know what kind of data you are calling through api, so I guess these are pages.
{ pages[0].acf.technologie_lista.map ( (field, index) => (
<div key={index} className="single-field">
{ field.nazwa_technologii }
</div>
) ) }
Let's break it down.
1 - My project contains two pages. I have chosen the first one, because only this one has needed ACF fields. technologie_lista is acf field name.
2 - You need to use map function to list all posts. You need to assign key to each element.
nazwa_technologii is just a repeater sub field name.
And that's all. I might make some rookie mistakes, but it work's for me. I hope that i helped. Cheers!
Hi I am new to Ionic and,
I am using AngularJS with Ionic v1 here load more scrolling is too much slowed.
I have tried two ways
Service
Factory
both ways are very slow. how can I speed up my load more option.
These are the values i am getting from the api REST service
{
"shared_status": "false",
"wall_post_id": "740",
"post_post": "getU.online",
"post_added_by": "589",
"post_company_name": "The Business Club",
"post_business_sector": null,
"post_busin_type": "Limited Company",
"post_added_by_image": "1471523735.png",
"post_added_by_name": "Russ Wheeler",
"post_added_on": "14 hours ago",
"post_date": "2017-01-31 18:48:36",
"post_mine": true,
"image_list": [{
"file_name": "http:\/\/www.domain.com\/uploads\/wall_posts\/tmp\/\/1485888514.jpg"
}],
"like_status": "activated",
"like_test": false,
"like_test_1": "Unlike",
"like": " Like",
"num_like": "1",
"no_of_reply": 1,
"comment": "comment"
}
Use only ionic directive wherever possible as they are designed keeping mobile performance in mind. Using non-ionic directives will but, at the cost of performance.
So, if you are using some custom / plugin based solution .. remove that and instead use <ion-infinite-scroll>
Here is sample :
<ion-infinite-scroll
ng-if="moreDataCanBeLoaded()"
icon="ion-loading-c"
on-infinite="loadMoreData()">
</ion-infinite-scroll>
Read more :
https://ionicframework.com/docs/api/directive/ionInfiniteScroll/
First Check your API calls latency. If they are okey then use followings
to increase ionic app performance loading list and etc.
Try to do following things.
Add crosswalk plugin (This will increase your .apk file size but performance wise it will be good option )
If you can use one time data-binding(::) in your list item use it
Use track by in you ng-repeat list item (eg. ng-repeat="item in items track by item.id" or ng-repeat="item in items track by $index")
When application in production remove console.log if have any
Also you can find out some more performance tips in this link
I'm working with angular-datatables.
My end goal is to have a table with no pagination but with a "link" that allow to "show 25 more entries" (and without using the select length "10", "25", "50","100" etc).
So first of all, I set the display length to 25 with :
this.dtOptions = DTOptionsBuilder.newOptions()
.withBootstrap()
.withDisplayLength(25)
Great my table is showing only 25 five entries with pagination.
No I try to disable the pagination with :
this.dtOptions = DTOptionsBuilder.newOptions()
.withBootstrap()
.withDisplayLength(25)
.withOption('paging', false)
And then the pagination is disable but the table is showing more than 25 entries.
I get that it's kind of logic since otherwise there will be no means to acces those 25+ entries but that's what i'd liked to acheive.
Thanks
I would simply hide the injected pagination element when the table is finished rendering :
.withOption('drawCallback', function() {
$('.dataTables_paginate').hide()
})
.dataTables_paginate is the overall <div> where dataTables places the pagination control, if any.
Basically, what I need to do is create a Fullscreen window display for a shop using data that is being used on their current website, now, I have choosen to use AngularJS for this project, mainly because I want to learn it and the best way to learn is doing.
I have a JSON file containing an array of items, it currently contains the following data:
{
"prop_id" : "",
"prop_title" : "",
"prop_postcode" : "",
"prop_price" : "",
"prop_image" : "",
"prop_desc" : "",
"template" : "views/prop-no-thumbs.html",
"info_image" : "",
"duration" : "4000"
},
So, I have a unique ID, the template that I wish to use to display this item and the duration I want the view to be present on the screen. These will vary.
What would be the best way to handle this in AngularJS, I have made a start using some example code I found on GitHub but can't seem to get it to automatically rotate (question can viewed here: AngularJS: Slide divs automatically with a set duration on page load ).
Any ideas? Should I also be using a third party plugin? Does anyone have any tutorials or resources to handle something like this?
You could use the angular ui bootstrap carousel directive and tweak with css (remove the arrows, resize it, etc...)
I'm trying to figure out how to link an html picture element back to the database entry that was originally used to generate the picture link.
I am using Meteor:
- I have a database that contains photosets data from Flickr API
- In the HTML, I have a handlebar "each" script that iterates through each photoset in the database and then uses this info to generate the html for the photoset cover picture links.
- When the html renders, the photoset cover pictures are downloaded from Flickr and displayed to the screen.
I would like to be able to click on the photoset cover picture and then automatically generate the links to the pictures in the photoset. But I don't understand how to dynamically link the html picture elements back to their respective database entries that were originally used for generating the picture links. I need to be able to find the original database entries so that I can load the info needed for generation of subsequent links.
As a newb to all of this I'm not really sure where to start looking or what to try. I've wondered about creating an object with custom key pairs to 'memorise' the identity of each photoset picture. Is this the way to go, or is there an easier way that I am overlooking?
Thanks.
Say you have your pictures being put out this way:
Template.mytemplate.helpers({
picture:function() {
return pictures.find()
}
});
You can also do this instead, which is pretty much the same thing:
Template.mytemplate.picture = function() {
return pictures.find();
}
With the html
<template name="pictures">
{{#each picture}}
<img src="{{src}}" class="pictureselector"/>
{{/each}}
</template>
You can use events which can get data from that particular picture document/record
Template.mytemplate.events({
'click .pictureselector':function(event,template) {
console.log(this._id); //Should give you the `_id` of the picture that was clicked
}
});
this is the data context of the element that was clicked & generate the link you want using the data inside this.
Be careful if you use something with a callback inside the click like Meteor.call, you will have to relay the message down via var self = this otherwise the context of this would become the one of Meteor.call