호버에 성명 표시 limitTo 콘텐츠 angularjs 사용?

Question

제품 array.it는 이름, 가격, 수량으로 구성됩니다. 나는 limitTo를 사용하고 있습니다. 이름 길이가 20에 도달하면 제품에 마우스를 올리면 어떻게 풀 타임을 표시합니까?

는

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

Answer 1

당신은

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" title="{{item.name}}"> 

title 속성을 사용하거나 경우에 대한 각 무엇을 사용하지 툴팁 아래처럼.

마크 업

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

컨트롤러 내가 CSS 옵션을보고 당신을 제안했지만

$scope.limit = 20; 

Demo Plunkr

---

어디를 text-overflow: elipsis과 overflow: hidden을 사용하여 동일하게 달성 할 수 있습니다. 당신은 동일한 것을 구현하기 위해 this link을 참조 할 수 있습니다.