javascript - 在悬停时显示全名 limitTo Content 使用 angularjs？

Question

我有一个产品数组。它由名称、价格、数量组成。当名称长度达到 20 时，我正在使用 limitTo。当悬停在产品上时如何显示全名请帮助我？

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

Answer 1

您可以使用title 属性

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

或者如果你要为它使用 angular 而不是工具提示

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>