Creating a "Read More" link with a 'shortened' paragraph of 50 words, from a <html> input

4,109 views
Skip to first unread message

Robert Chai

unread,
Jan 19, 2012, 8:25:11 AM1/19/12
to AngularJS
Hi there,

I'm currently faced with a challenging idea where I haven't been able
to find an answer on Google or on Stakeoverflow. Basically, I would
like to try creating a "post" similar to that of blog entries, where a
paragraph of text is cut off at the say 50th word. An idea code can be
found here: http://stackoverflow.com/questions/1528780/creating-excerpt-text-with-a-read-more-link
after much research online.

The problem here is that while I'm trying to implement a $filter
function, there is no display of data, as I think there is some clash
with the jQuery code to do the shortener on-load of the page.

The added challenge in this case, is I would like to retrieve a JSON-
pulled data, where the input data is in <html> fomat, thus the use of
{{inputdata | html}}.

I understand that there is an API filter called "limitTo",
http://docs-next.angularjs.org/api/angular.module.ng.$filter.limitTo ,
but I was trying {{inputdata | html | limitTo:50}}, there is an error,
or maybe I just have no idea how about going about doing it.

I was wondering if anyone would have any solution or idea how I may
try going about to do it. Sincerely appreciate it! Thanks! =D

Miško Hevery

unread,
Jan 19, 2012, 1:34:55 PM1/19/12
to ang...@googlegroups.com
You need to create your own filter. The filter would basically chop
of the extra characters but it would have to be HTML aware. Once you
have such filter you could feed it into the HTML filter like this.

{{ data | myChop | html }}

> --
> You received this message because you are subscribed to the Google Groups "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to angular+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/angular?hl=en.
>

Robert Chai

unread,
Jan 23, 2012, 7:34:14 AM1/23/12
to AngularJS

Hi Misko,

I apologize to ask this again, but I guess I've tried looking in a few
ways, but always seem to get back this error:


Syntax Error: Token 'limitText' should be a function at column 17 of
the expression [entry.snippet | limitText | html] starting at
[limitText | html].


What does it mean, would you help breakdown what does the above syntax
error is trying to say?

Many thanks! =D

Dan Doyon

unread,
Jan 23, 2012, 10:55:29 AM1/23/12
to ang...@googlegroups.com
Robert,

If you posted a jsfiddle, that would help shed some light.

--dan


Sent from my iPhone

Robert Chai

unread,
Jan 23, 2012, 9:28:14 PM1/23/12
to AngularJS


Hi Dan,

Sorry it took a while as I'm still learning to understand some
different parts of AngularJS.

Anyway, here's my code where the error is displayed http://jsfiddle.net/sgrobert/tybKs/

I do hope the error can be broken down so I can better move on with my
tasks. Thanks so much! =D


--Robert

Suller Andras

unread,
Jan 23, 2012, 11:09:32 PM1/23/12
to ang...@googlegroups.com
Hi Robert,

You should set "no wrap (body)" on the left side.

I played with your fiddle a little bit: http://jsfiddle.net/xMYpy/
It might be good for start.

Andras

Robert Chai

unread,
Jan 24, 2012, 12:08:24 AM1/24/12
to AngularJS


Hi Suller,

Thanks for helping with a sample of code for my problem. However, with
regards to the "no wrap (body)" segment, how do I actually implement
my code on my project? Is there a specific way I should place my
javascript or angularjs code? As the error syntax still seems to
appear similar to http://jsfiddle.net/sgrobert/tybKs/2/

Hope you can help clear up my doubts. Thanks! =D

--Robert

Dan Doyon

unread,
Jan 24, 2012, 1:54:06 AM1/24/12
to ang...@googlegroups.com
Robert

The "no wrap (body) segment" is strictly for jsFiddle to ensure that angular gets loaded first.  Suller's sample isn't showing exceptions in the browser's I've tested (chrome/ie8/ff)

For an example of how to organize your projects you can refer to angular-phonecat project. 

https://github.com/angular/angular-phonecat which is on angular v 0.9.16 

Hope this helps

--dan


Robert Chai

unread,
Jan 24, 2012, 12:23:32 PM1/24/12
to AngularJS

Hi Dan,

Hmmm.. I guess my current setup is exactly the same as that in the
angular-phonecat project as I've built from scratch and built around
the structure within the example. However, I'm still experiencing the
same syntax error, thus, I was pondering whether the "no wrap (body)
segment" would be helpful as it seems to "work" when the code is
running on jsFiddle.

Any ideas? =D


--Robert

Dan Doyon

unread,
Jan 24, 2012, 12:51:36 PM1/24/12
to ang...@googlegroups.com
Robert,

Are which browsers are you testing on (and versions)? Are you using Firebug or comparable debug tools? 

If you use the unminified version of angular you'll get a more understandable error? Do you have a public location (other than fiddle) that can be looked at? 

--dan


From: Robert Chai <sg.r...@gmail.com>
To: AngularJS <ang...@googlegroups.com>
Sent: Tuesday, January 24, 2012 9:23 AM
Subject: [angular.js] Re: Creating a "Read More" link with a 'shortened' paragraph of 50 words, from a <html> input
--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+unsub...@googlegroups.com.

Robert Chai

unread,
Jan 24, 2012, 9:09:47 PM1/24/12
to AngularJS


Hi Dan,

I think currently I'm facing some major issues... Especially cross-
browser viewing. I've been based on Safari, which generally loads the
static files perfectly, however when I ported to Firefox, the static
files does not work. However, amazing it does run on my web server.

But that aside, I've created a sample copy of the problem on a partial
site routed under http://roberryarts.com/sample (please click on the
link "showcase").

Please do help me take a look as no matter how I've tried and looked
at it, it doesn't seem to work for me as compared to the earlier
jsfiddle composed by Suller.

I sincerely appreciate the help! =D


--Robert

Misko Hevery

unread,
Jan 24, 2012, 11:01:51 PM1/24/12
to ang...@googlegroups.com
How about this: http://jsfiddle.net/tybKs/3/ Is that what you are looking for? if not how exactly do I reproduce the issue.



--Robert

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Dan Doyon

unread,
Jan 25, 2012, 12:34:05 AM1/25/12
to ang...@googlegroups.com
Robert,

Well from the sample you've provided, I'm not seeing where the blog filter is, none of these scripts after angular shows me the limitBlogEntry filter. 
		<script src="gui/js/scripts.js"></script>
		<script src="gui/js/controllers.js"></script>
		<script src="gui/js/services.js"></script>
		<script src="gui/js/widgets.js"></script>
Is it somewhere else? It should be after the angular script tag. 
--dan


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Dan Doyon

unread,
Jan 25, 2012, 12:40:36 AM1/25/12
to ang...@googlegroups.com
Misko,

I think Suller's version http://jsfiddle.net/xMYpy/ is what Robert wants, since there are html tags in his content.  I believe his issue (based on looking at his website) is how javascript is laid out. 

--dan

Robert Chai

unread,
Jan 25, 2012, 3:41:55 AM1/25/12
to AngularJS


Hi Dan,

Thanks for pointing that out, I just updated the code, however, the
error still persists. You can still check it out at http://roberryarts.com/sample
(please click on the
link "showcase").

Thanks! =D

--Robert

On Jan 25, 1:34 pm, Dan Doyon <dando...@yahoo.com> wrote:
> Robert,
>
> Well from the sample you've provided, I'm not seeing where the blog filter is, none of these scripts after angular shows me the limitBlogEntry filter.
>                 <script src="gui/js/scripts.js"></script>
>                 <script src="gui/js/controllers.js"></script>
>                 <script src="gui/js/services.js"></script>
>                 <script src="gui/js/widgets.js"></script>
> Is it somewhere else? It should be after the angular script tag.
> --dan
>
> On Jan 24, 2012, at 6:09 PM, Robert Chai wrote:
>
>
>
>
>
>
>
>
>
> > Hi Dan,
>
> > I think currently I'm facing some major issues... Especially cross-
> > browser viewing. I've been based on Safari, which generally loads the
> > static files perfectly, however when I ported to Firefox, the static
> > files does not work. However, amazing it does run on my web server.
>
> > But that aside, I've created a sample copy of the problem on a partial
> > site routed underhttp://roberryarts.com/sample(please click on the

Robert Chai

unread,
Jan 25, 2012, 3:44:23 AM1/25/12
to AngularJS

Hi Misko,

I guess it does work on jsFiddle, but apparently it is not working on
the codes on the project app itself, so I guess at the moment is
trying to sieve out why it is having a syntax error as seen in
http://roberryarts.com/sample (please click on the link "showcase"),
before I can attempt to insert some logic into the javascript in the
filters.js.

Still, thanks for helping me out! Sincerely appreciate it! =D


--Robert



On Jan 25, 12:01 pm, Misko Hevery <mi...@hevery.com> wrote:
> How about this:http://jsfiddle.net/tybKs/3/Is that what you are looking
> for? if not how exactly do I reproduce the issue.
>
>
>
>
>
>
>
> On Tue, Jan 24, 2012 at 6:09 PM, Robert Chai <sg.rob...@gmail.com> wrote:
>
> > Hi Dan,
>
> > I think currently I'm facing some major issues... Especially cross-
> > browser viewing. I've been based on Safari, which generally loads the
> > static files perfectly, however when I ported to Firefox, the static
> > files does not work. However, amazing it does run on my web server.
>
> > But that aside, I've created a sample copy of the problem on a partial
> > site routed underhttp://roberryarts.com/sample(please click on the

Robert Chai

unread,
Jan 25, 2012, 7:53:56 AM1/25/12
to AngularJS

Hi Dan & Misko,

I think I managed to get it. After clearing up a mess I've made and
some code spelling mistakes, the version is now working. Thanks Dan &
Misko! =D

--Robert

ThomasBurleson

unread,
Jan 25, 2012, 8:32:05 AM1/25/12
to AngularJS
Nice!

On Jan 24, 11:01 pm, Misko Hevery <mi...@hevery.com> wrote:
> How about this:http://jsfiddle.net/tybKs/3/Is that what you are looking
> for? if not how exactly do I reproduce the issue.
>
>
>
>
>
>
>
> On Tue, Jan 24, 2012 at 6:09 PM, Robert Chai <sg.rob...@gmail.com> wrote:
>
> > Hi Dan,
>
> > I think currently I'm facing some major issues... Especially cross-
> > browser viewing. I've been based on Safari, which generally loads the
> > static files perfectly, however when I ported to Firefox, the static
> > files does not work. However, amazing it does run on my web server.
>
> > But that aside, I've created a sample copy of the problem on a partial
> > site routed underhttp://roberryarts.com/sample(please click on the
Reply all
Reply to author
Forward
0 new messages