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

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

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

來源

2016-08-12 SrinivasAppQube

可以使用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) + '...'); 
 
      }); 
 
     } 
 
    }; 
 
})

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

來源

2016-08-12 09:05:01 WalksAway

這是顯示工具提示。但不希望工具tip.expand在同一個地方。 – SrinivasAppQube

好的，我添加了一個替代指令，我推薦指令方法，因爲它可以在你的代碼中重用+如果你的產品使用mouseenter標誌的循環，並且離開會觸發所有的！除非你使它成爲產品本身的一個屬性 – WalksAway

更好的方法是使用'ui-bootstrap'的'uib-popover' .. –

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

標記

<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來實現相同的

來源

2016-08-12 09:07:08

如果你有多個段落，它會擴展他們所有的...... – WalksAway

@WalksAway我明白了，這就是爲什麼你更新了你的答案..我不想在我的答案中重複同樣的事情，但你的方式似乎很棒對我來說。 :) –

它的一個很好的答案，但指令會更好地在這裏:) – WalksAway

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

回答

相關問題