显示更多文本：响应以 json 的形式出现

Posted 2023-02-27

【中文标题】显示更多文本：响应以 json 的形式出现

【英文标题】：Show more text:response coming in the form of json

【发布时间】：2017-05-22 17:29:56

【问题描述】：

您好，我只需要显示一些文本（3 行） 并且应该在显示更多按钮上加载其他文本

这里的文本来自 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>

在描述部分，我需要限制文本，然后...当我点击...时，我需要获取完整数据。

任何帮助将不胜感激

【问题讨论】：

使用limitTo查看文档here

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

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

@Jax 请看一下编辑后的问题

【参考方案1】：

您可以从限制要显示的字符数开始，如下所示：

$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       

您可以根据<div> 的大小设置limit 以覆盖文本的前三行。

我添加了一个带有 3 个点 (...) 的 <span>，以显示更多文本，如下所示：

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

以及控制器中显示更多文本的逻辑：

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

更多详情请见plunkr。

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

另外SO this answer 向您展示了如何在不破坏单词的情况下实现自定义过滤器。

【讨论】：

感谢您的回答，但是在 html 中，当我保持 limitTo 过滤时，如果单词显示一半，那么我怎样才能获得完整的单词？

答案的最后一段是该问题可能解决方案的链接。