Wordpress & Angular: How to get data from another page with page ID - angularjs

I am quite new to Angular, but I have successfully set up a list.html template to show posts in Wordpress using V2 of the WP API.
Now, I would like to show some (ACF) fields from another page above my post list. I have the ACF API plugin installed as well, and it does work for posts.
I just have no idea how to refer to the right page ID, or if I need to set up another controller for this.
<!-- try to get data out of page id 2 > http://www.example.com/wp-json/acf/v2/page/2 -->
<h1 ng-bind-html="pages:2.acf.title">not working...yet...</h1>
As you can see ":2" probably makes no sense, but I could not find any reference on how to do this properly.
Thanks in advance for any help!
btw. this is the full code from my list.html template/partial:
<!-- try to get data out of page id 2 > http://www.example.com/wp-json/acf/v2/page/2 -->
<h1 ng-bind-html="pages:2.acf.title">not working...yet...</h1>
<div class="post-list">
<article ng-repeat="post in posts | orderBy:'date'" class="col-md-2">
<div>
<div class="date-wrap">
<h6 class="event-date">{{post.title.rendered}}</h6>
</div>
<!-- <div ng-bind-html="post.content.rendered | to_trusted"></div> -->
<div ng-if="post.acf.event_title">
<div class="post-data-container">
<p>{{post.acf.event_title}}</p>
<p ng-if="post.acf.conversation_with">A conversation with {{post.acf.conversation_with}}</p>
<p>{{post.acf.about_or_by}} {{post.acf.lecture_from}} </p>
</div>
<img ng-src="{{post.acf.portrait.sizes.thumbnail}}" />
</div>
<div ng-if="!post.acf.event_title">No Event Title</div>
<a ui-sref="detail({id: post.id})">Click here to read more</a>
</div>
</article>
</div>

Are you grabbing the ACF data from the OTHER post? Is it part of your JSON object that returns to the view? If it is, you would just point to that. To verify it is, go to yourdomain.com/posts/:id where id is the post you are viewing, and see if the OTHER post's ACF data is present.
If not you'll need to create a controller or another function which hits the API again for that other post's data, so $scope.other_post = getPost({id:OtherPostID});
make sense?

Related

AngularJS filter not working on two or more items

I am displaying the list of incidents on the page using AngularJS.(It works)
I also have 3 buttons on the page. 'Open'-shows open incidents, 'Closed' -shows closed incidents, 'All' -shows all incidents.(It works)
Issue: when I try to set the page default to show only "Open incidents", when the users opens the page.
Note: By using below code, I am able to set the page default to "Open incidents", when the list have 1 incident. But, if it have more than 1 incident, the code is not working and showing empty page.
I am putting the total code in plunker. As I am using this code in a Tool, it is not possible to run this code in plunker. The tool have separate script to get all the incidents in JSON format. I am also attaching the JSON format in JSON file. Any help would be appreciated. Thank you.
<div class="myRequests">
<div class="row" ng-repeat="inc in IncItems | filter:{status: IncStatus}">
<div class="panel panel-default {{inc.status}}">
<div class="panel-heading">
<h4 class="panel-title">{{inc.number}}</h4>
</div>
<div class="panel-body">
<div class="col-md-3 pace">
<p><b>Status:</b> {{inc.status}}</p>
<p><b>State:</b>{{inc.state}}</p>
</div>
</div>
</div>
</div>
</div>
Plunker: My code

Best way to link a unique scope to individually created child elements in angular

I am very new to angular (just started trying to learn last week) so I apologize if this is difficult to follow. I am creating a very basic post and comment type page to practice making custom directives and I am having trouble with the scope. Since I am not storing any data I want a page that you can add posts and comment on them all without creating any new partials only rendering certain templates to the existing page. I am able to add posts perfectly and use a for each to display all of them. Once they are displayed within the creation of the post I added an optional add comment button which when clicked drops down a form. I want it so this form is linked only to that comment. I thought by putting it in the creation of the comment I was setting it up this way but when I add comments it adds it to all of the posts. I realized this is because I don't have anything setting the scope of my comment to only show for that post element nor do I know how to do this.
``` </rd-post>
<div class="posts" ng-repeat="posts in hpc.arr track by $index">
<img class="pic" alt="pic" src="{{posts.imgurl}}" />
<h1 class="posttitle"> {{ posts.title }}</h1>
<p class="author"> by: {{ posts.author}} </p>
<p> {{posts.description}}</p>
<p ng-click="addcomment=!addcomment" ng-init="addcomment=false"> <img class="commentpic" src="http://kingofwallpapers.com/pencil/pencil-003.jpg" /> Add comments </p>
<rd-comments ng-show="addcomment"></rd-comments>
<p ng-click="comm=!comm" ng-init="comm=false"> <img class="commentpic" src="http://www.psdgraphics.com/file/comment-icon.jpg" /> show comment </p>
<!-- ng-click="hpc.commentsF(posts, commment)" -->
<div ng-repeat="comment in hpc.commentarr track by $index">
<div ng-show="comm">
<!-- <div class="comm" ng-repeat="comment in hpc.commentarr track by $index"> -->
<h1>{{comment.title}}</h1>
<p> {{comment.description}} </p>
</div>
</div>
</div> ```

Rendering Images to razor view Cshtml. Angular issues

"allitems" contains all items for a category that is selected in a combobox. That part of the code working properly.
I have images saved in a database as binary data for each item. When an item is displayed then the image of the item shall be rendered. For doing this I have to save item's ID in ASP .Net controller before rendering, because the "RenderImage" needs the Item's ID. This is done by calling "saveItemId" in AngularJS controller.
But the rendering of the images are very unpredictable. "saveItemId" is called repeatedly but not RenderImage.
There is no problem calling methods/saving ID in AngularJS controller or in ASP .Net MVC controller.
<div dir-paginate="r in allitems | filter:q | itemsPerPage: pageSize" current-page="currentPage" ng-init ='saveItemId(r.ID)' class="ag-fresh">
<div style="float:left">
<div class="col-xs-3">
<div style="width:200px;">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="#Url.Action("RenderImage")" height="84" width="84"/>
<br/>
<h>{{r.Price}}</h>
<p>{{r.Name}}</p>
<button class="btn btn-default add-to-cart" ng-click="AddToCart(r.ID)">Add to cart</button>
{{successTextAlert}}
</div>
</div>
</div>
</div>
</div>
</div>
its seems that RenderImage is a js variable in the controller scope. if its so, its need to be call with brackets, like {{RenderImage}}
Try using 'ng-src' instead 'src' attribute, for the img element as described at
https://docs.angularjs.org/api/ng/directive/ngSrc#!
This works properly:
<img ng-src="data:image/jpeg;base64,{{arrayBufferToBase64(r.InternalImage)}}" height="84" width="84"/>
I Added arrayBufferToBase64 to the angular controller.

Getting posts (poster name, photo, text body) into VF page from specific Chatter group - Struggling getting into VF

I am working off of some code I found on the Internet - I have only been on the ADM 201 course.
What I am doing is attempting to pull the information from a post and then put this into a VF page. I know I can use chatter:feed, but this is getting all of the information and functions, whereas I need only the text body, poster name, and picture (not essential).
What I have so far:
Apex Class:
public class Test_3 { //Class is
public ConnectApi.FeedElementPage feedElementPage{get;set;}
public Test_3() {
feedElementPage = ConnectApi.ChatterFeeds.getFeedElementsFromFeed('0F958000000TWvL', ConnectApi.FeedType.Record, 'showInternalOnly');
}
}
VF page:
<apex:page controller="Test_5">
<div class="posts">
<div class="row">
<div class="col-md-6">
<apex:repeat value="{!feed.elements}" var="feedElement">
<div class="media">
<a class="pull-left" href="{!feedElement.parent.id}">
<img class="media-object" src="{!feedElement.photoUrl}" alt="{!feedElement.actor.name}"/>
</a>
<div class="media-body">
<h4 class="media-heading">{!feedItem.actor.name}</h4>
// This creates a heading from the posts that is the poster's name
{!feedElement.body.text}
// This is the body of the post
</div>
</div>
</apex:repeat>
</div>
</div>
</div>
<footer>
<p>© Operations Updates - Please refresh your browser for the latest</p>
</footer>
</apex:page>
Current issues:
!feedElement.parent.id
!feedItem.actor.name
"Error: Unknown property 'ConnectApi.Feed.elements'"
Anyway, I can't work this out. I've been trying to make this for a lovely 5 hours now.
Any help would be much appreciated.
The code was modified from here and then I attempted to update it to Elements from Items.
Thanks
In your Apex class, the variable is called "feedElementPage" but in the Visualforce page, it says "feed". Please update feedElementPage to feed in Apex class or update repeat value="{!feed.elements}" to repeat value="{!feedElementPage.elements}"
In addition, I think you should use FeedItem instead of FeedElement. Please take a look at the document, and let me know if you have any other questions.

Dynamically populate a page

I am new to mobile applications, and since i have a strong html, js, css background i decided to try cordova using angularjs. Anyway, i have hit a road block and i don't know the best way to handle this.
I have this block that is setup to repeat; x.large and x.thumb are pulled from a json file via Angular.
<div class="gallery" ng-controller="imagelistController">
<div class="thumbnail" ng-repeat="x in urls">
<img src="{{x.thumb}}">
</div>
</div>
I want to setup a single page using a query string href links to a page such as image.html?id=1. In image.html i want it do display image 1. If you change the id to 2, it would show image 2.
<div ng-controller="imagelistController">
<img src="{{x.large}}">
</div>
<ul class="social-share">
<li><button onclick="window.plugins.socialsharing.share(null, null, '{{x.large.url}}', null)">image only</button></li>
</ul>
<script type="text/javascript" src="js/SocialSharing.js"></script>

Resources