Я пытался создать угловую директиву, которая бы сократила абзац или div, если в нем больше определенного числа символов (например, 115).

Я не смог найти ничего, что могло бы мне помочь, я видел http: //dotdotdot.frebsite. NL / и это сработало для некоторых людей, но я пытаюсь сделать это с помощью угловой директивы, а не JQuery.

Если есть какая-то помощь, которую кто-то может предложить, она будет очень признательна, я по сути выброшен из идей.

Вот как настроен мой взгляд:

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

Первоначально я сделал так, чтобы это работало, просто как jquery, но было нецелесообразно просто jquery и угловой

$(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;
 });
});
5
Veda99817 17 Дек 2015 в 20:34

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/

1
Jack A. 17 Дек 2015 в 18:23

Вы можете просто использовать фильтр limitTo, если вы хотите просто обрезать текст в определенной точке (но не изменять значение строки):

{{ fullString | limitTo: 115 }}
1
Dave M 17 Дек 2015 в 17:44

Быстрый гугл показал этот пакет, который, казалось бы, заполнил бы вашу потребность в усечении предельного количества символов.

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

ПРИМЕЧАНИЕ: я не писал / не использовал эту директиву, поэтому не могу говорить, что она работает должным образом.

1
DaveMC08 17 Дек 2015 в 17:40