CODEWITHSUNDEEP
javascriptcssangularjsellipsis
Kurkula
Kurkula

Reputation: 6762

Angularjs show more ellipsis text with ng-click

I am trying to show ellipsis for div content with '...more' text. I am also trying to use ng-click to show full text on clicking '....more'.

What I am trying is to add a hover class on click but having issues connecting click event to show more text.

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;
    }

Upvotes: 1

Views: 3493

Answers (2)

Ben Nieting
Ben Nieting

Reputation: 1520

Use ng-class and ng-click together to apply a class based on a boolean value, like this:

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>

style.css

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

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

Here is a plunk.

Upvotes: 3

luk492
luk492

Reputation: 368

Check this out, I think this is what you wanted.

[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>

JS

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;
};
}

Upvotes: 1

Related Questions