Question

我有一个简单的ng-grid，其中最后一列Lyrics里面可能有短文本或长文本。我希望能够检测文本何时非常长并且放置一个glyphicon按钮或链接，当单击时显示该单元格的整个文本。当文本较小时，glyphicon按钮或链接应该消失。这是我的网格内容：

$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'}
];

我为网格http://plnkr.co/edit/uQBT70XSyRG7ijVSg5Vf

创建的plunker

我看到了ng-grid 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;
 }

有没有办法弄清楚单元格何时使用此.ngCellText然后放一个按钮

Answer 1

您可以使用length计算文字的长度。例如：

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')
}

ng-grid单元格文本包装并使用眼睛按钮或链接显示所有单元格文本

1 个答案: