javascript - 显示更多文字 :response coming in the form of 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       
}

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

我添加了<span>用 3 个点 (...) 显示更多文本，如下所示:

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

以及 Controller 中显示更多文本的逻辑:

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

参见plunkr了解更多详情。

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

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