我一直在研究制作一个角度指令,如果它有超过一定数量的字符(例如115),它会缩短段落或div.
我一直无法找到任何对我有用的东西,我已经看过http://dotdotdot.frebsite.nl/并且已经为某些人工作但是我试图使用angular指令而不是JQuery.
如果有人可以提供任何帮助,我将非常感激,我基本上是从想法中挖掘出来的.
这是我的视图设置方式：
我最初只是把它作为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;
});
});
最佳答案
我认为你要找的是ng-class.您可以使用它来添加和删除基于布尔表达式的类,这基本上就是您在使用jQuery实现时所做的事情.例如：
HTML：
JS：
var app = angular.module('testapp',[]);
app.controller('testctrl',function ($scope) {
$scope.hidden = true;
});
您可以使用ng-click和插值的组合来修改更多/更少的链接.
这是一个显示它工作的小提琴：https://jsfiddle.net/8xjxaz28/
原文链接：https://www.f2er.com/jquery/427748.html
