在AngularJS中顯示更多功能？

我有一個項目列表及其信息。問題是我想要顯示的描述高達50個字符。如果超過此值，我想顯示一個show more按鈕。點擊時，我想顯示全文。我想用過濾器來做，但我不知道如何實現這一點。在AngularJS中顯示更多功能？

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

有沒有我可以在人物...的位置寫<a href="">show more</a>鏈接的可能性？

或者還有另一種實現我的目標的方法嗎？

來源

2017-04-07 Usman Iqbal

你檢查了我的答案嗎？ –

Rohit請運行代碼 –

感謝您糾正me.I更新我的答案片段。你可以請現在檢查。 –

觀察：

你的實現是正確的。問題出在你的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>

來源

2017-04-07 17:45:42

是否每個人都在代碼片段控制檯或它的只是我看到這些腳本錯誤？ –

顯示更少？ –

在你寫的關於「只顯示更多」的問題上.hence，'show less'功能沒有實現。如果你想我可以寫'show less'功能。 –

你不需要任何指令來實現這一目標。

只需參考plnkr.co/edit/G3XxBnvAKhc53qy4foPr?p=preview;我剛創建了一個樣本。 limitTo過濾器已經足夠實現了。

來源

2017-04-07 18:09:41 Srigar

在AngularJS中顯示更多功能？

回答

相關問題