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) + '...');
            });
        }
    };
})

<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来实现相同的

使用angularjs显示悬停限制的全名？

2 个答案: