Erstellen weiterlesen-link in AngularJS
Möchte ich einen link erstellen, mit Lesen, mehr text. wenn es mehr als 3 Zeilen in einem Absatz dieser link sollte gut sichtbar sein und ein Klick darauf zeigt alle anzeigen der Linien.
- OK, gut zu wissen.
- Haben Sie versucht, irgendetwas?
- Können Sie uns zeigen Ihre versuche, dies zu tun und welche Probleme Sie haben? Ein jsFiddle wäre toll!!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wollte ich das gleiche tun, so habe ich eine Richtlinie. Schau mal hier: https://gist.github.com/doukasd/0744566c5494ebc8643f
Verwendung ist ziemlich einfach:
Werden, wobei 100 die maximale Zeichenanzahl, die Sie angeben möchten.
UPDATE: dd-text-Zusammenbruch
Für mehr Lesen , können Sie verwenden eckige limitTo filter für die Begrenzung der Absatz auf Zeichen Länge statt der Begrenzung von Absatz zu Zeilennummern .
Können Sie so etwas wie dieses :
in html
controller
Basierend auf einige Informationen, die ich hier zusammengestellt habe eine schöne show, mehr/weniger Durchführung
Richtlinie Definition
showMore.js
showMore.html
Die Verwendung ist ziemlich einfach, nur transclude was immer Sie wollen, um zu zeigen, mehr/weniger
USAGE:
Ich hoffe das ist etwas hilfreich!!!
Kann es einige workaround.
grundlegende Idee ist wie diese
Über die Schaltfläche.
Wenn die Schaltfläche aus text-Bereich, es ist für Sie kein problem, denke ich.
Wenn Sie die Schaltfläche inline innerhalb des Elements, es gibt 2 possibilitis.
wenn Sie es wollen, position fixed rechts unten /
erstellen Sie einen Gradienten hintergrund für die button -, fade-out-Effekt.
Sieht es nett und sehr einfach.
hier ist das jsfiddle: http://jsfiddle.net/sunderls/HYHZ6/ .
Jedes mal ein-und ausschalten der Status ist, können Sie tatsächlich ändern Sie die Klasse des Elements.
wenn Sie möchten, dass es direkt nach Ende der text? es ist ein wenig schwierig, da selbst wenn der text, die Höhe ist 3 Linien, können Sie nicht sicher sein
ob es weiterhin 3 Linien Höhe , nachdem man eine Taste neben
es.
Ich denke, eine Möglichkeit ist die Verwendung von Bereichs-API, die zum berechnen der Absatz
Abmessungen, (ich habe die api in meine collamark.com es ist mächtig
aber die verschiedenen Browser haben unterschiedliche Verhaltensweisen). Eigentlich kann man
Holen Sie sich die Dimensionen jedes Linien dynamisch. Und durch einige
rückwärts-loops, können Sie den entsprechenden Teilstring des Textes,
um zu zeigen, in minimierten Modus, das ist genau das richtige für 3 Zeilen Höhe
mit einem Knopf. (die api-doc ist hier:
https://developer.mozilla.org/en-US/docs/Web/API/range)
So jetzt jedes mal, wenn Sie wechseln den Zustand, den Sie eigentlich ist, ändern Sie die
text. nicht die Klasse.
Hier beginnt der Code, wenn es in Eckige
Vorlage
erste, der diese Art von Funktion ist ein eigenständiges Modul, das Sie wiederverwenden können überall, also auch in Ihrer Vorlage, wir erstellen eine neue Richtlinie
autoFolded
, sth wie diese:Richtlinie.Kaffee
dann behandeln wir alle die Logik, die in der Richtlinie definition( sorry für das schreiben in Kaffee wenn)
hier ist die Erklaerung
für diese Richtlinie enthält text, der es nicht weiß, so ist es eine transluzente direcitve. Wie ein modales popup, es enthält den Text und eine Schaltfläche zum Umschalten.
beim klicken auf die Schaltfläche, es eigentlich die Umschaltung. Wenn ausgeklappt, dann Falten Sie es; Wenn foled, dann entfaltet. Wir erreichen dies durch ein-und ausschalten der Klassennamen, die Kälte ist einfach
nutzen wir
ng-click="toggleFoldedState()"
binden Sie diese Aktion, um die Umschalten-TasteHaben wir einige erste arbeiten zu Falten Sie den text, wenn Sie groß genug bei Seite geladen. Allerdings
link
Funktion der Richtlinie ist die Schaffung der tatsächlichen Dom, vor dem dom-rendering.So inlink
wir können nicht wissen, die Höhe, das ist, warum wir registrieren dieinit()
zungcontentloaded
Veranstaltung:hier verwende ich 48px als 3-Zeile-Höhe, können Sie Ihre eigenen definieren oder berechnen Sie dynamisch aus dem dom, wie
content.css('lineHeight')
.da dies nach dom-rendering, also der text wird bereits angezeigt, bevor init(). Es wird eine hässliche slideUp-Effekt. Das ist, warum wir zuerst verstecken Sie den dom mit css(wie die folgenden), und die
content.show()
im initSo, wir sind fertig mit der Richtlinie, die gefaltet/unfoled Staat kontrolliert werden durch Klassenname. hier gehen wir.
css.sass
(sorry, ich schrieb es in
sass
)So der text der Umschalten-Taste und Sichtbarkeit sind alle gesteuert von der Klasse des übergeordneten Elements ein.
für die Eltern
1. wenn der text, der ist keine 3-Zeilen-Höhe, es wird nur
'auto-folded'
als css-Klasse, so ist die Schaltfläche ausgeblendetinit()
Prozess, es ist und Klassennamen werden'auto-folded auto-folded--folded'
.dann wird die Schaltfläche eingeblendet. ein Klick darauf Umschalten Eltern Klassennamen zwischen
'auto-folded--folded'
und'auto-folded--unfolded'