CODEWITHSUNDEEP
javascripthtmlcssangularjs
Veda99817
Veda99817

Reputation: 169

Angular show element based on height

Currently I have a paragraph that gets shortened/lengthened based on the max height. I was wondering if there was a way that I could show/hide the anchor element if the height is over a certain amount. Essentially I only want to show the "more..." if it's needed.

$scope.hidden = true;
    .__Description {
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    }
    .less {
      max-height: 160px;
 
    }
<div class="__Description">
	    <div class="__contents" ng-class="{less: hidden}">
		    <div data-ng-bind-html="program.Description"></div>
	    </div>
    </div>
    <a ng-click="hidden = !hidden">{{hidden? 'More...' : 'Less...'}}</a>

Upvotes: 1

Views: 1670

Answers (2)

guy mograbi
guy mograbi

Reputation: 28638

I would wrap the content and the read more in a directive.

The directive would watch for the content height, and then toggle a property on the scope.

Here is pseudo code for the general idea. (plunker link below) To make the code more suitable for your needs I need more info

<program-description>
<div class="__programDescription">
    <div class="__contents" ng-class="{less: hidden}">
        <div data-ng-bind-html="program.Description"></div>
    </div>
</div>

</program-description>


angular.module('myApp').directive('programDescription', function(){

    return {

         restrict: 'A',
         transclude: true, 
         template: '<div><div ng-transclude></div> <a ng-show="showToggle">{{ toggleText }}</a></div>',
         link: function( scope, element, attrs ){
               var limit = attrs.limit  ? parseInt(attrs.limit,10) : 200; // default to 200px
               scope.$watch(function(){
                   return element.find('.__programDescription').height();
               }, function(if (newValue > limit){
                   scope.showToggle = true;
               });

               .. some more code to handle more/less clicks.. 

         }
     }

})

a working plunker is available at: http://plnkr.co/edit/Sm393HAzTRp8wqEPNkdg?p=preview

Upvotes: 3

Matheno
Matheno

Reputation: 4142

You can show this based on the length of your description.

Definition and Usage

The length property returns the length of a string (number of characters).

The length of an empty string is 0.

For example:

<a href="#" ng-show="program.Description.length < 1000">More...</a>

Edit:

As @Andrew Tomlinson mentioned, you can keep the logic in 1 sentence for example like this:

<a href="#"> (program.Description.length < 1000) ? 'More...' : 'Less...'</a>

Upvotes: 1

Related Questions