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から配列と文字列の両方のために利用可能です。 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; 
 
    }; 
 
});

<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>

。

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フィルターでは十分に達成できます。