显示更多的文字：在JSON的形式响应未来

嗨，我需要证明只有一些文字（3号线）和其他文本应该显示更多的按钮显示更多的文字：在JSON的形式响应未来

这里的文字是从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>

在说明书秒

我需要有限的文字，然后...当我点击...我需要获得完整的数据。

任何帮助，将不胜感激

来源

2017-01-08 tania saxena

使用'limitTo'查看文档[这里]（https://docs.angularjs.org/api/ng/filter/limitTo） – Jax

我们可以使用limitTo，但如果这个词是一半显示，那么它不会看正确 –

你应该提到你想在你的问题中的完整单词。 – Jax

您可以通过限制要显示这样的字符数开始：

$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  
}

您可以设置limit涵盖基础的前三行文字的在你的<div>的大小。

我加了一个<span> 3点（...），以显示更多像这样的文字：在您的控制器

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

和逻辑来显示更多的文字：

见plunkr更多细节。

还有一些自定义过滤器可以使用，如this one。

另外SO this answer向您展示了如何实现自定义过滤器而不会破坏单词。

来源

2017-01-08 10:13:50 Jax

感谢您的答案，但在html中，当我保持limitTo过滤，然后如果这个词是一半显示，那么我怎么能得到完整的单词？ –

答案中的最后一段是指向该问题的可能解决方案的链接。 – Jax

显示更多的文字：在JSON的形式响应未来

回答

相关问题