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

Question

您好，我只需要显示一些文本（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>

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

任何帮助将不胜感激

Answer 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 向您展示了如何在不破坏单词的情况下实现自定义过滤器。