文字を制限し、角度JSとイオンの後に3ドットを持つ -- javascript フィールド と angularjs フィールド と ionic-framework フィールド 関連 問題

Limit characters and have three dots after in angular js and ionic












2
vote

問題

日本語

AngularyJSとIonicを使っています。私はNG-BIND-HTMLを使用してREST APIからデータをプルしています。キャラクターの量を制限したいだけで、ユーザーに読み取る方が表示されている文字が表示された後に3つの点があります...

これまで私は持っています:

<事前> <コード> <p ng-bind-html="item.excerpt | limitTo: 100"></p>

しかしこれは文字を制限してそれらを切り落とすだけです。

英語

I'm working with AngularJS and Ionic, I'm using the ng-bind-html to pull data from a rest API. I want to limit the amount of characters but also have three dots after the characters to show the user there is more to read...

So far I have:

<p ng-bind-html="item.excerpt | limitTo: 100"></p> 

But this just limits the characters and cuts them off.

</div
        
   
   

回答リスト

21
 
vote

純粋な角度的アプローチのために、あなたはこのようなことをすることができます:

<事前> <コード> {{(item.excerpt | limitTo: 100) + (item.excerpt.length > 100 ? '...' : '')}}
 

For a pure angular approach, you can do something like this:

{{(item.excerpt | limitTo: 100) + (item.excerpt.length > 100 ? '...' : '')}} 
</div
 
 
 
 
13
 
vote

正直なところ、あなたの質問はCSSに向けられているようです

テキストを切り捨てることができ、 "eLlipsis"

を使ってドット(...)を追加することができます

例、あなたがhtmlのようなものを持っているならば:

<事前> <コード> <project>/src/main/assets0

そしてあなたはcssにこのようなものを追加する:

<事前> <コード> <project>/src/main/assets1

結果は次のようなものです:

<事前> <コード> <project>/src/main/assets2

ボタンを「詳細を読む」ボタンを実装したい場合は、「省略記号」クラスを削除し、すべてのテキストが表示されます。

詳細情報: 省略記号Info

 

Honestly your question seems more oriented to css

You can truncate text, and add dots (...) using "ellipsis"

Example, if you have inside html something like:

<p class='ellipsis'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur<p> 

and you add something like this on css :

.ellipsis {     white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis; }  p.block {     width: 300px; } 

Result is something like :

<p class='ellipsis'>Lorem ipsum dolor sit amet ...</p> 

If you want implement a button "read more", on click, just remove the 'ellipsis' class, and all text will be displayed.

More info there : Ellipsis info

</div
 
 
2
 
vote

私のプロジェクトで私はこのフィルタを思い付きました:

<事前> <コード> <project>/src/main/assets3

使用:

<事前> <コード> <project>/src/main/assets4
 

In my project I came up with this filter:

angular.module('yourModule').filter('limitToDots', function($filter) {     return function(input, limit, begin, dots) {         if (!input || input.length <= limit) {             return input;         }          begin = begin || 0;         dots = dots || '...';          return $filter('limitTo')(input, limit, begin) + dots;     }; }); 

Usage:

<span>{{ text | limitToDots : 50 }}</span> <span ng-bind="text | limitToDots : 50"></span> <span ng-bind-html="text | limitToDots : 50"></span> 
</div
 
 
1
 
vote

あなたが 'リミット:' insion on binding でこれを試してください。 <事前> <コード> <project>/src/main/assets5

 

If you're using older ionic version which doesn't have 'limitTo:' on binding
like what @c0r3yz 's answer, try this in your html

{{ item.excerpt.length > 100 ? item.excerpt.substring(0,100)+"..." : item.excerpt }} 
</div
 
 
0
 
vote
vote
ベストアンサー
 

https://github.com/sparkalow/angular --truncate でこれを修正しました。本物のシンプルで使いやすく、それはng-bind-html

で使用できます
 

Fixed this with the https://github.com/sparkalow/angular-truncate. Real simple and easy to use and it can be used with ng-bind-html

</div
 
 
0
 
vote

BootstrapのTruncateクラスは私のための仕事をしました。

注:このコンテナは、これが機能するために固定幅または列の割合を持つべきです

REF: https://getbootstrap.com/docs/4.0/utilities. /#テキストラッピングとオーバーフロー

 

Text truncate class in Bootstrap did the job for me.

Note: The container should have a fixed width or column proportion for this to work

Ref: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

</div
 
 

関連する質問

1  Cordova - iOS11をサポートするように更新されるべきです  ( Cordova should be updated to support ios11 ) 
Cordovaバージョン6.4.0を使用してCordovaアプリを持っています Appleが開発者に投稿されて、2018年7月開発者のすべてのアプリや最新情報をIOS 11 SDKで構築する必要があります(詳細はこちら) 私の質問は、2018年7月以降にア...

0  Error Install Ionicをインストールします  ( Error install ionic ) 
<事前> <コード> C:windowssystem32>npm install -g ionic C:ProgramDataMicrosoftVisualStudioMDA55aaaddb aco-toolset-6.3.1ionic -> C:Progr...

1  イオン4キーボードは全体の内容を覆っています  ( Ionic 4 keyboard is covering whole content ) 
入力キーボードをクリックすると、すべてのコンテンツがカバーされます。 whatsappアプリと同じようにキーボードに入力トップ/アップ/上または上の入力を表示する必要があります。 <事前> <コード> <div *ngSwitchCase="'home'">...

0  AWS Pinogite / Ionic - "リソースが見つかりません" CLIを押すことを試みるときのエラー  ( Aws pinpoint ionic resource not found error when trying to send push through ) 
私はAWSサービスを備えたプログラミングで新たなものであるため、いくつかの根本的なことは私にとってかなり難しいです。最近、私は将来の実装を考慮したテストとして、プッシュ通知を送信するようにAmazon Pinpointを使用したアプリを開発するように求められま...

2  フォーム入力をブロックするイオンスライドページスクロール  ( Ion slides with form inputs blocks page scrolling ) 
<ion-slide > の内側にはいくつかのフォーム入力がありますが、スライド内のすべてのフィールドを表示するためにスクロールすることはできません。スライド内にスクロールするのを防ぎます。デバイスでは、イオン入力があると、イオンリストのスクロール動作が機...

0  スクリーンリーダーとより互換性のあるイオントーストの作り方  ( How to make ionic toast more compatible with screen reader ) 
私は私のアプリをより多くのスクリーンリーダーに互換性のあるものにしようとしています。私はGoogle Talkbackを使います。私の現在の障害は乾杯をしながら発生しました。 簡単なトーストを作成して提示するボタンを作成しました。スクリーンリーダーは完全にそれ...

0  "Ionic Cordova Build Android"のエラー  ( Error on ionic cordova build android ) 
私はAndroid上のアプリを構築しようとしていますが、常にこのエラーを返します android_home = / usr / lib / android-sdk java_home = / usr / lib / jvm / jdk1.8.0_171...

0  イオン3の変数から変数に値を割り当てる方法3  ( How to assign values from storage to a variable in ionic 3 ) 
変数に値を割り当てる方法はほとんどありませんが、成功する可能性があります。 方法1: - <事前> <コード> getData() { return this.storage.get('products') .the...

-1  イオン3:バックボタンを押したときにのみIonviewWillenterの作成方法は?  ( Ionic 3 how make ionviewwillenter only when back button pressed ) 
私は読みましたライフサイクルイベントをナビゲートする 私のユースケースはここでです。私はページのロード時のコンテンツと別のページから戻ったボタンを更新しなければなりませんでした。 <事前> <コード> ionViewDidLoad(){ this.g...

0  アプリIOSとAndroidのサイト  ( Site for app ios and android ) 
午後、 私は現在WordPressで作られた簡単なウェブサイトを持っていて、同じものをカプセル化するためのWebViewを作成したいと思います。 目標はアプリのように見えることです。そのため、クライアントはAndroidとiOSの両方でダウンロードすることがで...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有