AngularJS에 더 많은 기능을 표시 하시겠습니까?

Question

나는 그들의 정보와 함께 아이템 목록을 가지고있다. 문제는 최대 설명을 50 자까지 표시하려고합니다. 이 값을 초과하면 show more 버튼이 표시됩니다. 클릭하면 전체 텍스트를 보여주고 싶습니다. 필터로 처리하고 싶지만이를 달성하는 방법을 모르겠습니다.

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

나는 문자 ...의 위치에 <a href="">show more</a> 링크를 쓸 수있는 가능성이 있습니까?

아니면 내 목표를 달성하는 또 다른 방법이 있습니까?

Answer 1

관측 :

• 귀하의 구현은 올바른 것입니다. 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>

는 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 필터를 사용하면 충분합니다.