I am doing an app to display the posts from a WordPress account, but some of those posts are so long, so I need to limit the amount of characters to display only let's say 300 characters and also implement a button "read more..."
is there any angular way ?
or
how can I achieve that ?
angular.module('urbanet.app.service', [])
.service('FreshlyPressed', function($http) {
return {
getBlogs: function($scope) {
$http.jsonp('https://public-api.wordpress.com/rest/v1.1/freshly-pressed?callback=JSON_CALLBACK')
.success(function(result) {
$scope.posts = result.posts;
});
}
}
})
.controller('NewsCtrl', function($scope, $log, FreshlyPressed) {
$scope.posts = [];
$scope.doRefresh = function() {
FreshlyPressed.getBlogs($scope);
console.log('PRESSED');
}
$scope.doRefresh();
});
there is the code I am using.
You can use the limitTo filter like you would with an array in angular
<p>
<span ng-if="showall">{{postbody}}</span>
<span ng-if="!showall">{{postbody | limitTo:300}}</span>
<div ng-if="postbody.length > 300" ng-click="showall = !showall">read more...</div>
</p>
If it is a simple text, you can create a filter?
module.filter('CutText', function() {
return function (text, maxlength){
return text.length > maxlength ? text.substr(0, maxlength) + "..." : text;
};
});
//<div ng-bind="scope_variable | CutText:300"></div>
However, if you want to get what you mention, you can create a directive that adds a button element "Read more ..."
Directive:
module.directive('moreLess', ["$compile", function($compile){
return {
link: function(scope, element, attrs) {
var text = element.text(), max = +attrs.moreLess, button, more;
scope.show = false;
if(text.length > max){
button = angular.element("<a/>").attr({"ng-click": "show = !show", "href": "#"});
more = angular.element("<span />").attr("ng-show", "show").text(text.substr(max));
element.text(text.substr(0, max)).append(more).append(button);
var newScope = scope.$new();
$compile(element.contents())(newScope);
newScope.$watch("show", function(show){
button.text(!show ? "more..." : "less");
});
}
}
};
}]);
//
//HTML <div more-less="32">Big Text..........</div>
So basically something like
<div ng-repeat="post in posts>
<h1>{{ post.title }}</h1>
{{ post.text | limitTo: 300 }}
<button ng-click="viewPost(post.id)">
Read More
</button>
</div>
Is that right?
Updated my answer with a directive, but codepen is doing maintenance. I will try to save it tomorrow.
<!-- html -->
<div ng-repeat="post in posts">
<div id="{{$index}}" limit="{{limit}}"></div>
</div>
// module.directive
function limit () {
return {
restrict: 'A'
, replace: false
, link: function (scope, elem, attrs) {
var postText
, buttonText = 'Read More'
, limit = +attrs.limit
, span = angular.element('<span/>')
, button =
angular.element('<button/>')
.on('click', function () {
limit = limit < Infinity
? Infinity
: +attrs.limit
buttonText = limit < Infinity
? 'Read More'
: 'Close'
elem.init()
})
elem.init = function () {
postText = scope.posts[attrs.id].text.substr(0, limit)
button.text(buttonText)
elem.append(span).text(postText).append(button)
}
elem.init()
}
}
}
wordpress already provides you with an excerpt property which is an abbreviation of the post....typically set by word count within wordpress admin settings.
This property exists in the sample url in question
All you would need for "read more" is link to full post