눈금 단추 또는 링크를 사용하여 ng- 눈금 셀 텍스트를 줄 바꿈하고 모든 셀 텍스트를 표시합니다.

Question

마지막 열의 가사에 짧은 텍스트 또는 긴 텍스트를 포함 할 수있는 간단한 눈금이 있습니다. 나는 텍스트가 정말로 길 때 글리프콘 버튼이나 링크를 클릭하면 전체 텍스트가 그 셀을 보여주는 것을 감지 할 수 있기를 원합니다. 텍스트가 작아서 글리 phicon 버튼이나 링크가 사라질 때.

$scope.students = [ 
    {name: "Annete T", age: 36,lyrics:'What is this love you talking about'}, 
    {name: "Ramona R", age: 42,lyrics:'Look at the stars how they shine for you in all their yellow'}, 
    {name: "Lisa J", age: 45,lyrics:'Where is my boat, what happened to my boat' }, 
    {name: "Hirit H", age:30,lyrics:'You had my heart inside of your soul and you played it to the beat beat'}, 
    {name: "Emily M", age: 40,lyrics:'Hello my love we meet again, its been a while since we been together'}, 
    {name: "Lynn M", age: 40,lyrics:'Hello '}, 
    {name: "Nicki M", age: 43,lyrics:'Can you take me higher , to a place with golden streets, can you take me higher'}, 
    {name: "Raveena M", age: 46,lyrics:'Where'} 
]; 

그리고 나는 NG 그리드 CSS 요소 코드

.ngCellText { 
    padding: 5px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    white-space: nowrap; 
    -ms-text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
    overflow: hidden; 
} 

을보고 내가 그리드 http://plnkr.co/edit/uQBT70XSyRG7ijVSg5Vf

위해 만든 plunker 알아낼 수있는 방법이 있습니다 : 여기 내 그리드 내용은 셀이 .ngCellText를 사용하고 단추를 넣습니다.

Answer 1

'길이'가있는 텍스트의 길이를 그림으로 나타낼 수 있습니다. 예를 들어 :

var message = 'cow'; 

//will be 3 
message.length; 

는 메시지를 수신하고 짧게를 반환 $ scope.students 선언 위의 기능을 수행 메시지가 가사 열에서 보여 할 수 있도록합니다.

$scope.makeItShort = function(message){ 
    //put button with glyphicon and the message 
    return 'short message'; 
}; 

$scope.shortMessage = function(message) { 
    return (message.length > 20) ? $scope.makeItShort(message) : message; 
}; 

$scope.students = [{ 
    name: "Annete T", 
    age: 36, 
    lyrics: $scope.shortMessage('What is this love you talking about') 
}