Show more text:response coming in the form of json

Question

Hi i need to show only some text (3 lines) and the other text should be loaded on show more button

here the text is coming from json

JS:

$scope.fnInit = function() {
        getInfo.getSubCategory($stateParams.id).then(function(response){
            $scope.subCategory=response;
        })
    };

html:

<div ng-repeat="data in subCategory" class="sub_category">
    <div class="header"><b>{{data.heading}}</b></div>
    <div class="row content">
        <div class="col-xs-4"><img ng-src="{{data.image}}" class="img-responsive center-block" ></div>
        <div class="description col-xs-7" ng-bind-html="data.description"></div>
    </div>
</div>

in the description section i need to limited text and then ... when i click on the ... i need to get the full data .

Any help would be appreciated

Use `limitTo` check out the docs [here](https://docs.angularjs.org/api/ng/filter/limitTo) — Jax, Jan 08 '17 at 09:49
We can use limitTo but if the word is half shown then it would not look proper — tania saxena, Jan 08 '17 at 09:53

score 1 · Answer 1 · edited May 23 '17 at 11:46

You can start by limiting the number of characters you want to show like this:

$scope.limit = 100;

$scope.data = [{
    'description': 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. '
  }];

$scope.showMore = function(desc) {
  console.log(desc);
  $scope.limit = desc.length       
}

You can set limit to cover the first three lines of your text based on your <div>'s size.

I added a <span> with 3 dots (...) to show more text like so:

<span ng-click='showMore(d.description)'>...</span>

and the logic in your controller to display more text:

$scope.showMore = function(desc) {
  $scope.limit = desc.length;
}

See plunkr for more details.

There are also some custom filter you could use like this one.

Also SO this answer shows you how to implement a custom filter without breaking words.

Thanks for the answer but in html when i keep limitTo filter then if the word is half displayed then how could i get the full word? — tania saxena, Jan 08 '17 at 11:28
Last paragraph in answer is a link to possible solution to that issue. — Jax, Jan 08 '17 at 11:30

Show more text:response coming in the form of json

1 Answers1