Angularjs показать больше текста с многоточием с ng-click

Я пытаюсь показать многоточие для содержимого div с текстом «... больше». Я также пытаюсь использовать ng-click, чтобы показать полный текст при нажатии «... больше».Angularjs показать больше текста с многоточием с ng-click

Я пытаюсь добавить класс зависания при щелчке, но при этом возникают проблемы с подключением события click, чтобы показать больше текста.

my fiddle is here

<div ng-controller="MyCtrl" id= 'divEllipseContainer' class="{{class}}" ng-click ="showEllipseContent()"> 
    Chandra is in office with his beautiful wife with sour cream on her face. 
</div> 

var myApp = angular.module('myApp',[]); 
function MyCtrl($scope) { 
    $scope.class = "appEllipseContent"; 

    $scope.showEllipseContent = function(){ 
     if ($scope.class == "appEllipseContent") 
      $scope.class = ""; 
     else 
      $scope.class = "appEllipseContent"; 
    }; 
} 

.appEllipseContent { 
    overflow: hidden; 
    white-space: nowrap; 
    -ms-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
    width:200px; 
} 

    .appEllipseContent:hover { 
     overflow: visible; 
     white-space: normal; 
    }

источник

2016-02-11 Kurkula

Это не очень понятно, что вы просите. Вы хотите отобразить «*** ... больше ***» вместо «*** ... ***» на тексте elipsis? –

Использование нг-класса и нг нажмите вместе, чтобы применить класс, основанный на логическое значение, например:

index.html

<!DOCTYPE html> 
<html ng-app> 
    <head> 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
    <script src="script.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    </head> 

    <body> 
    <div ng-class="{'appEllipseContent': !isActive, 'appEllipseContenthover': isActive}" 
     ng-click="isActive = !isActive"> 
     Chandra is in office with his beautiful wife with sour cream on her face. 
    </div> 
    </body>  
</html>

стиле. css

.appEllipseContent { 
    overflow: hidden; 
    white-space: nowrap; 
    -ms-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
    width:200px; 
} 

.appEllipseContenthover { 
    overflow: visible; 
    white-space: normal; 
}

Адрес plunk.

источник

2016-02-11 20:22:56 Ben

Проверьте это, я думаю, это то, что вы хотели.

[http://jsfiddle.net/HB7LU/23727/]

HTML

<div id= 'divEllipseContainer' ng-mouseover="test2()" class="{{class}}" > 
    Chandra is in office with his beautiful wife with sour cream on her face. 
</div><a ng-hide="test" ng-mouseleave="test2()" ng-click="showEllipseContent()">...more</a> 
</div>

var myApp = angular.module('myApp',[]); 
function MyCtrl($scope) { 
$scope.class = "appEllipseContent"; 
$scope.test = true; 

$scope.showEllipseContent = function(){ 

    if ($scope.class == "appEllipseContent") 
     $scope.class = ""; 
    else 
     $scope.class = "appEllipseContent"; 
    }; 

    $scope.test2 = function(){ 
     if ($scope.test) 
     $scope.test = false; 
    else 
     $scope.test = true; 
}; 
}

источник

2016-02-11 20:32:25 luk492

Angularjs показать больше текста с многоточием с ng-click

ответ

Смежные вопросы