在 AngularJS 中显示更多功能？

Question

我有一个物品清单及其信息。问题是我想显示最多 50 个字符的描述。如果超过这个值，我想显示一个 show more 按钮。单击后，我想显示全文。我想用过滤器来做，但我不知道如何实现。

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

有没有可能我可以在字符...的位置写<a href="">show more</a>link？

或者有其他方法可以实现我的目标吗？

Answer 1

观察：

您的实施是正确的。问题出在您的 AngularJS 版本上。
AngularJSlimitTo 过滤器可用于 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>

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

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>

Answer 2

您不需要任何指令即可实现此目的。

简单参考plnkr.co/edit/G3XxBnvAKhc53qy4foPr?p=preview；我刚刚创建了一个样本。 limitTo滤镜实现绰绰有余。

在 AngularJS 中显示更多功能？

Show more functionality in AngularJS?

javascript

angularjs

angularjs-limitto