是否有一个基本的角度指令用于读取更多/更少的文本

Question

我一直在研究制作一个角度指令,如果它有超过一定数量的字符(例如115),它会缩短段落或div.

我找不到任何对我有用的东西,我已经看过http://dotdotdot.frebsite.nl/,这对一些人有用,但我试图使用角度指令而不是JQuery的.

如果有人可以提供任何帮助,我将非常感激,我基本上是从想法中挖掘出来的.

这是我的视图设置方式:

<div class="Description"
<div class="Content">
    <div data-ng-bind-html="item.Description"></div>
</div>

我最初只是把它作为jquery就好了,但是不建议只使用jquery和angular

$(function () {

var maxHeight = 115;
var moretext = Localization.Shared.InstitutionProfileStrings.ShowMore();
var lesstext = Localization.Shared.InstitutionProfileStrings.ShowLess();
$('.__Description').each(function () {
    var content = $(this).find(".__Content");
    var anchor = $(this).find(".morelink");

    if ($(content).height() > maxHeight) {
        $(this).addClass("less");
        $(anchor).html(moretext);
        $(anchor).show();
    }
    else {
        $(anchor).hide();
    }
});
$(".morelink").click(function (e) {
    e.preventDefault();
    var parent = this.parentElement;
    if ($(parent).hasClass("less")) {
        $(parent).removeClass("less");
        $(this).html(lesstext);
        $(parent).addClass("more");
    }
    else if ($(parent).hasClass("more")) {
        $(parent).removeClass("more");
        $(this).html(moretext);
        $(parent).addClass("less");
    }
    return false;
 });
});

Answer 1

我想你正在寻找的是ng-class。您可以使用它来添加和删除基于布尔表达式的类，这基本上就是您在 jQuery 实现中所做的事情。例如：

HTML：

<div ng-app="testapp" ng-controller="testctrl">
  <div class="content" ng-class="{ less: hidden }">
  Now is the time for all good men to come to the aid of the party.
  Now is the time for all good men to come to the aid of the party.
  Now is the time for all good men to come to the aid of the party.
  Now is the time for all good men to come to the aid of the party.
  </div>
  <button ng-click="hidden = !hidden">{{hidden ? 'Show' : 'Hide'}}</button>
</div>

JS：

var app = angular.module('testapp', []);
app.controller('testctrl', function ($scope) {
    $scope.hidden = true;
});

您可以使用 和 插值的组合ng-click来修改更多/更少链接。

这是一个显示其工作原理的小提琴：https ://jsfiddle.net/8xjxaz28/