I have a problem with creating accordions in my page where I'm using blogger API. I need to apply accordion format to a list of Blogger posts at http://www.winworldgk.tk , which are fetched using Blogger API. The problem is- I'm able to display all post contents and titles but are of general style not the required accordion style. Could any one there be help. The code is as bellow...
$(document).ready(function() {
// Make a JSONP request for the Posts on the Blogger Buzz blog
$.ajax({
url:"https://www.googleapis.com/blogger/v3/blogs/578441859855451483/posts?labels=EnglishTest&maxResults=5&key=mykey",
dataType: "jsonp",success: function(data, textStatus, jqXHR) {
var items = [];
// Construct a chunk of HTML for each post
// containing the Post title, content, and a
// link to the post author.
$.each(data.items, function(index, value) {
$('<h3>'+value.title+'</h3><div>'+value.content+'</div>').appendTo("#accId");
}
});$("#accId").addClass("accordion");
}
});
});
<html>
<body>
<div id="accId"></div>
</body>
</html>
Related
Actually I have an HTML file in the server that, contains img tags, JavaScript and CSS code. I'm trying to get the content of this file using the $http service and display it inside a twig file using the ng-bind-html directive.
Until now everything is OK, but the problem is the HTML page is not displaying well, the images are not there, and the JavaScript code doesn't work.
How can I achieve this using AngularJS?
<div ng-repeat="language in languages" id="[[ language.name ]]" ng-bind-html="language.content" ></div>
$scope.languages={};
$http({
method :'GET',
url : 'url'
}).then(function(response)
{
var results = response.data.data;
for (var i=0; i<response.data.data.length; i++)
{
results[i].content = $sce.trustAsHtml(response.data.data[i].content);
}
$scope.languages = results;
});
You are looking for ng-bind-html. See the docs. Here is the example.
I am accessing Wordpress data through an HTTP REST API plugin (this wordpress plugin: http://v2.wp-api.org/). I know how to grab my post title, but how do I display the featured image associated with that post using this plugin? My test shows the post title and the featured image ID, but I am unsure how to display the actual image. Test Example.
Here's my code:
<div ng-app="myApp">
<div ng-controller="Ctrl">
<div ng-repeat="post in posts | limitTo: 1">
<h2 ng-bind-html="post.title.rendered"></h2>
<p>{{ post.featured_image }}</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script>
var app = angular.module('myApp', ['ngSanitize']);
app.controller('Ctrl', function($http, $scope) {
$http.get("http://ogmda.com/wp/wp-json/wp/v2/posts").success(function(data) {
$scope.posts = data;
});
});
</script>
To get featured images response, please add _embed on the query string. example:
http://demo.wp-api.org/wp-json/wp/v2/posts/?_embed
Then, access the featured images in returned JSON response using _embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url
var app = angular.module('myApp', ['ngSanitize']);
app.controller('Ctrl', function($http, $scope) {
$http.get("http://ogmda.com/wp/wp-json/wp/v2/posts?_embed").success(function(data) {
$scope.posts = data;
var firstFeaturedImageUrl = $scope.posts[0]._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url;
});
});
A better way would be to integrate the URL of the featured image into the json response so that you get it all in a single request. You can add the following code (inside your-theme/functions.php) to achieve this:
//Get image URL
function get_thumbnail_url($post){
if(has_post_thumbnail($post['id'])){
$imgArray = wp_get_attachment_image_src( get_post_thumbnail_id( $post['id'] ), 'full' ); // replace 'full' with 'thumbnail' to get a thumbnail
$imgURL = $imgArray[0];
return $imgURL;
} else {
return false;
}
}
//integrate with WP-REST-API
function insert_thumbnail_url() {
register_rest_field( 'post',
'featured_image', //key-name in json response
array(
'get_callback' => 'get_thumbnail_url',
'update_callback' => null,
'schema' => null,
)
);
}
//register action
add_action( 'rest_api_init', 'insert_thumbnail_url' );
Then in your view, you can use
{{ post.featured_image }}
Note: To get the same image in different sizes, use above wp_get_attachment_image_src function that accepts any valid image size, or an array of width and height values in pixels as its second parameter.
I found a very easy way to do this.
Just download the new Wordpress plugin called Better Rest API Featured Image.This plugin adds a better_featured_image field to the post object that contains the available image sizes and urls, allowing you to get this information without making a second request.
You can replace <p>{{ post.featured_image }}</p> with this <img ng-src="{{post.better_featured_image.source_url}}" />
I have an external template called _include.tmpl.html it's contents are:
<script id="sBlock1" type="text/ng-template">
<li ng-repeat="user in users" data-customer-id="{{user.CustomerID}}" ng-class-odd="'alternate'" ng-click="GetOrdersForUser($event)">
<span class="name">{{user.ContactName}}</span><br>
<span class="title">{{user.ContactTitle}}</span><br>
<span class="phone">{{user.Phone}}</span><br>
<span class="country">{{user.Country}}</span>
</li>
</script>
I would like to load the external template, feed it my array of users and get the compiled result? I was trying the below with no luck?
$http.get('_include.tmpl.html', { cache: $templateCache })
.then(function (response) {
var test = $compile(response.data)($scope.users);
console.log(test);
});
The use case is - for infinite scroll. You scroll down, I fetch results from a db feed the results to the template, get the compiled html and append that to the DOM. Each time you scroll down you get more results and the results keep getting appended to the DOM element.
You seem to be trying to mimic what a custom directive can already do for you
HTML
<users></users>
JS
angular.module('myApp').directive('users', function(){
return {
templateUrl:'_include.tmpl.html'
};
});
This will make the server side ajax call for you and populate the data. It will also store the template in $templateCache so another call to server isn't needed
However you would need to remove the wrapping script tag which is part of what is currently causing you problems
It should be $compile(response.data)($scope);.
And considering _include.tmpl.html template has been loaded, and sBlock1 is in template cache, it has to be
$http.get('sBlock1', { cache: $templateCache })
.then(function (response) {
var test = $compile(response.data)($scope);
console.log(test);
});
I have this code that loads the content when the page load,
Now I want to know how to reload the content by clicking the button.
Can you show me how to do it with example please?
Javascript code:
.controller('InterNewsCtrl', function($scope, NewsService) {
$scope.events = [];
$scope.getData = function() {
NewsService.getAll().then(function (response) {
$scope.events = response;
}), function (error) {
}
};
$scope.getData(); // load initial content.
})
Html code:
<ons-toolbar fixed-style>
<div class="left">
<ons-back-button>Voltar</ons-back-button>
</div>
<div class="right">
<ons-toolbar-button><ons-icon icon="ion-android-refresh"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Internacional</div>
</ons-toolbar>
I think you're asking how to just retrieve new events from the backend. If that's correct, you don't need to reload the entire page.
You already have a function called getData which goes and retrieves you data via your service. Assuming your service doesn't cache the data, just call getData from your button:
<ons-toolbar-button ng-click="getData()"><ons-icon icon="ion-android-refresh"></ons-icon></ons-toolbar-button>
P.S. if you do explicitly have the cache set to true in your service, you can remove the cached data with $cacheFactory.get('$http').removeAll();.
For reloading same page in angular Js without post back
first remove that url from template cache if you call $route.reload() without removing it from $templateCache it will get it from cache and it will not get latest content
Try following code
$scope.getdata=function()
{
var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$route.reload();
}
and Call it as following
<input type="button" ng-click="getdata();" value ="refresh"/>
Hope this will help
Please reffer this
I am new to Angular and trying to figure out how to adapt an ASP.NET app into Angular. I need to display a different link to the user depending on the group the user belongs to. I have a Web API (ASP.NET Web API) that I can call to determine the user. I am using the following Angular code to call the Web API, but what I am unsure of is what to do next. If $scope.userGroupInfo contains the group the user belongs to how do I then display a different link in HTML depending on the group?
AngularJS
(function() {
var app = angular.module("linkSwitcher", []);
var MainController = function($scope, $http) {
var onApiCallComplete= function(response) {
$scope.userGroupInfo = response.data;
};
var onError = function(reason) {
$scope.error = "There was a problem calling the API";
};
$scope.getUserGroup = function(userId) {
$http.get("https://myapi.mysite.com/api/clients/getUserGroup/" + userId)
.then(onApiCallComplete, onError);
};
};
app.controller("MainController", MainController);
}());
HTML
<body ng-controller="MainController">
<form name="GetGroup" ng-submit="getUserGroup()">
<input type="submit" value="Lookup User Group Link" />
</form>
</body>
Please assume I have referenced the Angular library properly and that I am just displaying the portion of HTML that calls the Angular script.
well, what do you want to change in the display? you can try using ng-if="" inside a tag to show it, or you can use ng-class="someObjectMappingClassNameToBoolean" to modify the class depending on some flag.
Ex: (I don't know the structure of your response)
<div ng-if="userGroupInfo.groupId=== 7" > <a>Show me if userGroupInfo.groupId equals to 7 is true!</a> </div>
or
<div ng-class="{'blue-class': userGroupInfo.isBlue === true, 'error': userGroupInfo.isError === true }" > <a>Blue class added if isBlue is true, error class if isError is true</a></div>
You can also use ng-href to generate a calculated hyperlink, either as a whole or just as part, e.g. ng-href="http://path.to/{{groupName}}"