顯示懸停時的全名limitTo內容使用angularjs？

Question

我有一個產品array.it由名稱，價格，數量。我使用limitTo當名稱長度達到20時。 當鼠標懸停在產品上時，如何顯示全名請收藏我？

<p class="hover">{{ item.name| limitTo: 20 }}{{item.name.length > 20 ? '...' : ''}}<p/> 

Answer 1

可以使用title財產

<p class="hover" title="{{item.name}}"> 

，或者如果你使用什麼角度它並沒有提示

angular.module('app', []) 
 
.controller('myController', function($scope) { 
 
$scope.myText = "some very very very very very long text"; 
 
}) 
 
.directive('hoverText', function() { 
 
    return { 
 
     restrict: 'A', 
 
     scope: { 
 
      hoverText: '=', 
 
      maxChars: '=' 
 
     }, 
 
     link: function (scope, element) { 
 
      element.text(scope.hoverText.substr(0, scope.maxChars) + '...') 
 
      element.on('mouseenter', function() { 
 
       element.text(scope.hoverText); 
 
      }); 
 
      element.on('mouseleave', function() { 
 
       element.text(scope.hoverText.substr(0, scope.maxChars) + '...'); 
 
      }); 
 
     } 
 
    }; 
 
})

p

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="myController"> 
 
    <p hover-text="myText" max-chars="20"> 
 
    </p> 
 
</div>

Answer 2

你可以做些什麼如下所示。

標記

<p class="hover" ng-mouseenter="limit=item.name.length" ng-mouseleave="limit=20"> 
    {{ item.name| limitTo: limit }}<span ng-bind="limit > 20 ? '...' : ''"></span> 
<p/> 

控制器

$scope.limit = 20; 

Demo Plunkr

---

雖然我建議你看看CSS選項，你可以使用text-overflow: elipsis和overflow: hidden來實現相同。你可以參考this link來實現相同的