показать полное имя на hover limitTo Content Использование 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

Вы могли бы сделать что-то как показано ниже.

Markup

<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 для реализации того же