Question

我是angularjs的新手，我需要将多行文字显示为2行（最多显示225个字符）并添加超链接以查看更多文本，并添加更少链接以隐藏更多文本。我尝试使用jquery需要一些帮助才能集成到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

Answer 2

每次有可能重用这种方法的情况我们应该创建指令（或组件）。下面我创建了准备使用指令 more-less-text ，可以在ng-repeat中使用，也可以单独使用，也可以根据需要使用。

有关解决方案的更多信息 - 我们可以在此使用ng-show和ng-if而无需额外的jquery事件，这正是我在 more-less-text 指令中所做的。< / p>

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>

在ng-repeat中使用应如下所示：

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

其他一些信息

我使用的是指令而不是组件，因为stackoverflow目前无法创建比AngularJs 1.2更多的代码片段。

代码使用ES6功能，如多行字符串，但可以轻松地重构为ES5。

Angular Js：具有更多或更少链接的多行文本

2 个答案: