Angular Js : multiline text with more or less links

Question

I'm new to angularjs, i need to display multiline text into 2 lines(max display 225 chars) and add a hyperlink to view more text, and less link to hide more text. I tried it in using jquery need some help in integrating into angular.

Angular Code

<div class="row" ng-repeat="note in noteList">
  <div>{{note.title}}</div>
  <div>
    <span ng-if="note.length>225">{{note.body | limitTo:225:1}}
            <a class="more-link expand-link" data-rel="#prj-note-{{$index + 1}}">More...</a></span>
    <span id="prj-note-{{$index + 1}}" class="prj-note" ng-if="note.length>225">{{note | limitTo:5000:225}}
            <a class="collapse-link" data-rel="#prj-note-{{$index + 1}}">Less...</a></span>
    <span ng-if="note.length<225">{{note.body}}</span>
  </div>
</div>

Jquery

$('.expand-link').on('click', function(e) {
  e.preventDefault();
  $($(this).attr('data-rel')).show('fade', 300);
  $(this).css('display', 'none');
});

$('.collapse-link').on('click', function(e) {
  e.preventDefault();
  var tempId = $(this).attr('data-rel');
  $(tempId).hide();
  $($("a[data-rel='" + tempId + "']")[0]).css('display', 'block');
})

Css

.prj-note{display:none;}

Thanks in advance for help!

Answer 1

var app = angular.module('MyApp', ['ngMaterial', 'hm.readmore']);
app.config(function($mdThemingProvider) {
  $mdThemingProvider
    .theme('docs-dark', 'default')
    .primaryPalette('grey')
    .accentPalette('pink')
    .warnPalette('red')
    .dark();
})

app.controller('ExampleController', Example4Controller);

/** @ngInject */
function Example4Controller($scope) {
  $scope.text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida vel erat eu vestibulum. Maecenas malesuada, ante at venenatis porta, erat risus porta massa, ac vestibulum libero ex id mauris. Sed faucibus arcu eget lorem vestibulum congue. Phasellus at elit non dolor semper eleifend. Donec nec maximus purus. Donec pretium orci sed ullamcorper scelerisque. Nullam quis elit tristique, interdum eros quis, tincidunt tortor. Fusce odio enim, maximus in sollicitudin vitae, fermentum in elit. Aliquam pretium odio condimentum, fringilla risus in, mollis mi. Phasellus ullamcorper enim vehicula mi commodo laoreet.';
  $scope.limit = 200;
  $scope.lessText = "Read less";
  $scope.moreText = "Read more";
  $scope.dotsClass = "toggle-dots-grey";
  $scope.linkClass = "toggle-link-yellow";
}

Please check this link, It will help you out.

http://codepen.io/ismarslomic/pen/yYMvrz

Answer 2

Every time We have such case when it is possible to reuse such approach We should create directive ( or component ). Below I created ready to use directive more-less-text which can be used in ng-repeat or standalone or as You need.

More about solution - We can use here ng-show and ng-if without additional jquery events and this is exactly what I have done in more-less-text directive.

const app=angular.module("app",[]);

//Ready to use directive
app.directive("moreLessText", function(){

  return {
    restrict: "E",
    controller: function($scope){
      
      $scope.showFullText = false;
      
      $scope.showMore = ()=>{
      
        $scope.showFullText = true;
        
      };
      
      $scope.showLess = ()=>{
      
        $scope.showFullText = false;
        
      };
    },
    scope: {
      text:"@",
      limit:"=",
      index:"="
    },
    template: `
     <div>
          <div ng-if="text.length>limit" ng-show="!showFullText" >
            <span>{{text | limitTo:limit:1}}
            <a href="#" class="more-link expand-link" ng-click="showMore()" >More...</a></span>
          </div>

          <div ng-if="text.length>limit" ng-show="showFullText" >
            <span class="prj-note">{{text | limitTo:5000:limit}}
            <a href="#" class="collapse-link" ng-click="showLess()" >Less...</a></span>
          </div>
     
        <div ng-if="text.length<=limit">
          <span>{{text}}</span>
        </div>
    </div>
    `
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  
  <more-less-text text="Some example text. Lorem ipsum, some more characters." limit="10" index="1" ></more-less-text>
  
  <more-less-text text="Some example text. Lorem ipsum, some more characters." limit="100" index="2" ></more-less-text>
  
  <more-less-text text="Some example text. Lorem ipsum, some more characters." limit="5" index="3" ></more-less-text>
  
  
</div>  

Using in ng-repeat should look like:

 <more-less-text text="{{note.body}}" limit="someLimit" index="$index+1" ></more-less-text>

---

Some additional info

I used directive instead of component because stackoverflow not gives currently possibility to create code snippet with something more than AngularJs 1.2.

Code is using ES6 features like multi-line strings, but can be easily refactored to ES5.