jquery - Angular JS : multiline text with more or less links

Question

我是 AngularJS 的新手，我需要将多行文本显示为 2 行(最多显示 225 个字符)并添加超链接以查看更多文本，并添加更少的链接以隐藏更多文本。我尝试使用 jquery 需要一些帮助来集成到 Angular 中。

Angular 代码

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

预先感谢您的帮助!

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

请检查此链接，它会帮助你。

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