CODEWITHSUNDEEP
javascriptcssangularjsdotdotdot
Leo
Leo

Reputation: 1505

dotdotdot see more not working with Angularjs

I have a repeat with a bunch of text I want to apply the ellipsis to. I am using jquery dotdotdot. dotdotdot documentation

I made a simple directive that looks like

angular.module('core').directive('dotdotdot', [function () {
  return {
    required: 'ngBind',
    restrict: 'A',
    replace: false,
    priority: 100,
    link: function ($scope, element, attrs, ctrl) {
      $scope.isTruncated = false;
      $scope.hasRun = false;
      $scope.$watch(element.html(), function (value) {
        if (!$scope.hasRun) {
          $scope.hasRun = true;
          element.dotdotdot({watch:'window',
                              after: 'a.dotdotdotMore'});
          $scope.isTruncated = element.triggerHandler('isTruncated');
          if ($scope.isTruncated){
              console.log('Truncated');
          } else {
              console.log('NOT Truncated');
          }
        }
      });
    }
  };
}]);

It works fine applying the ellipsis but when someone clicks the item I want it to expand.

My html looks like 

  <div class="review item" data-ng-repeat="review in creator.reviews | orderBy:'order' track by $index">
    <h1 dotdotdot data-ng-bind="review.review" class="testimonial" data-ng-class="{'testimonial-truncate': showTestimonial !== $index}" data-ng-click="testimonialClick($index);"></h1>

  </div>

the css for testimonial-truncate is

.testimonial-truncate {
   max-height:200px;
}

my click function looks like

$scope.testimonialClick = function (index) {
      if ($scope.showTestimonial && $scope.showTestimonial === index) {
        $scope.showTestimonial = -1;
      } else {
        $scope.showTestimonial = index;
      }
      $timeout(function() {
        $('.testimonial').trigger('update');
      }, 200);
    };

It seems like the code is all being called but the text is still truncated to the maximum height even though that class is removed.

I am looking for a solution so either how do I get what I have done working or is there a better way to do this.

Upvotes: -2

Views: 507

Answers (1)

qwerty_igor
qwerty_igor

Reputation: 939

So If I am not mistaken you have several blocks of elements and you want them to be shortened ... kind of notation, and when you click on one of them, that element would expand and rest of them shrink.

You would need to place ng-class condition to not to equal the index of the item, in which case when app starts all items ng-class == true; and when you click you set that element ng-class == false and rest of them == true.

<div ng-controller="test">
    <div ng-repeat="item in items track by $index">
        <h1 ng-class="{'testimonial-truncate' : expanded != $index }"> 
            {{ item }} 
        </h1>
        <button ng-click="setExpand($index)">expand</button>
    </div>
</div>

And your controller is Test Controller

app.controller('test', ['$scope', function($scope){
    $scope.expanded = -1;

    $scope.setExpand = function(indx){
        $scope.expanded = indx;
    }
}]);

That should work. Let me know if it doesn't

BTW your code is working. just need to add overflow:hidden, perhaps.

Upvotes: 0

Related Questions