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

一个快速谷歌显示这个包似乎填补了你对特定字符限制截断的需求。

https://github.com/lorenooliveira/ng-text-truncate

注意：我没有编写/使用该指令，因此我无法正常工作。

Answer 2

如果你想在某一点简单地剪掉文本（但实际上没有改变字符串的值），你可以使用limitTo过滤器：

{{ fullString | limitTo: 115 }}

Answer 3

我认为您正在寻找的是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/

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

3 个答案: