Question

我有一个项目列表及其信息。问题是我想要显示最多50个字符的说明。如果超过此值，我想显示show more按钮。点击后，我想显示全文。我想用过滤器来做，但我不知道如何实现这一点。

{{jobs.description | limitTo: 2}}{{jobs.description.length>20 ? '...':''}}

我是否有可能在<a href="">show more</a>字符的位置写下...个链接？

还是有另一种方法来实现我的目标吗？

Answer 1

您不需要任何指令来实现这一目标。

只需参阅plnkr.co/edit/G3XxBnvAKhc53qy4foPr?p=preview;我刚刚创建了一个样本。 limitTo过滤器足以实现。

Answer 2

<强>观察：

您的实施是正确的。问题出在你的AngularJS版本上。
AngularJS limitTo 过滤器可用于 v1.2.1 以后的数组和字符串。

工作演示

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {

    // Initial 50 characters will be displayed.
    $scope.strLimit = 50;

    // String
    $scope.jobs = {
      description: "Hi I have a list of items along with their information. The problem is I want to show the description up to 50 letters, but if it exceeds this value I want to show show more button upon clicking it I want to show the full text. I want to do it with filters, but I don't know one could achieve this with my way."
    };

  // Event trigger on click of the Show more button.
   $scope.showMore = function() {
     $scope.strLimit = $scope.jobs.description.length;
   };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  {{ jobs.description | limitTo:strLimit }}
  <span ng-if="jobs.description.length > 50">
    <button ng-click="showMore()">Show more</button>
  </span>
</div>

根据 Plnkr 功能的评论更新了 show less 。

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {

    // Initial 50 characters will be displayed.
    $scope.strLimit = 50;

    // String
    $scope.jobs = {
      description: "Hi. I have a list of items along with their information. The problem is I want to show the description up to 50 letters, but if it exceeds this value I want to show show more button upon clicking it I want to show the full text. I want to do it with filters, but I don't know one could achieve this with my way."
    };

  // Event trigger on click of the Show more button.
   $scope.showMore = function() {
     $scope.strLimit = $scope.jobs.description.length;
   };

  // Event trigger on click on the Show less button.
   $scope.showLess = function() {
     $scope.strLimit = 50;
   };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  {{ jobs.description | limitTo:strLimit }}
  <span ng-if="jobs.description.length > 50 && jobs.description.length != strLimit">
    <button ng-click="showMore()">Show more</button>
  </span>
  <span ng-if="jobs.description.length == strLimit">
    <button ng-click="showLess()">Show less</button>
  </span>
</div>

在AngularJS中显示更多功能？

2 个答案: