Batasi panjang string dengan AngularJS

225

Saya memiliki yang berikut ini:

<div>{{modal.title}}</div>

Apakah ada cara agar saya dapat membatasi panjang string untuk mengatakan 20 karakter?

Dan pertanyaan yang lebih baik adalah apakah ada cara saya bisa mengubah string untuk dipotong dan ditampilkan ...di akhir jika lebih dari 20 karakter?

angularjs filter angularjs-filter Alan2
sumber

3

jsfiddle.net/tUyyx

Ufuk Hacıoğulları

344

Edit Versi terbaru dari filterAngularJS penawaranlimitTo .

Anda memerlukan filter khusus seperti ini:

angular.module('ng').filter('cut', function () {
        return function (value, wordwise, max, tail) {
            if (!value) return '';

            max = parseInt(max, 10);
            if (!max) return value;
            if (value.length <= max) return value;

            value = value.substr(0, max);
            if (wordwise) {
                var lastspace = value.lastIndexOf(' ');
                if (lastspace !== -1) {
                  //Also remove . and , so its gives a cleaner result.
                  if (value.charAt(lastspace-1) === '.' || value.charAt(lastspace-1) === ',') {
                    lastspace = lastspace - 1;
                  }
                  value = value.substr(0, lastspace);
                }
            }

            return value + (tail || ' …');
        };
    });

Pemakaian:

{{some_text | cut:true:100:' ...'}}

Pilihan:

wordwise (boolean) - jika benar, potong hanya dengan kata-kata batas,
maks (bilangan bulat) - panjang maksimal teks, potong ke jumlah karakter ini,
tail (string, default: '...') - tambahkan string ini ke string input jika string terpotong.

Solusi lain : http://ngmodules.org/modules/angularjs-truncate (oleh @Ehvince)

EpokK
sumber

2

Ada yang setara di angular-modules: ngmodules.org/modules/angularjs-truncate

Ehvince

angularjs-truncate bukan solusi, tetapi solusi IS Anda. Terima kasih! Jadikan sebagai modul!

Anton Bessonov

@epokk Ada cara untuk memungkinkan pengguna, setelah mengklik tiga titik, menunjukkan teks yang belum dipotong? Suka "tunjukkan lebih banyak"? Terima kasih!

Thales P

ini berfungsi dengan baik ketika kita menggunakannya seperti ini {{post.post_content | cut: true: 100: '...'}} Tetapi gagal ketika saya menggunakan seperti ini <span ng-bind-html = "dipercayaHtml (post.post_content | cut: true: 100: '...')"> < / span> Karena saya terpaksa menggunakannya dengan html tepercaya dalam kasus saya

S Vinesh

Batas wordwise adalah fitur bagus yang sepertinya tidak ada dalam "limitTo" default

pdizz

496

Berikut adalah perbaikan satu baris sederhana tanpa css.

{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}

Pemerintah
sumber

79

Sederhana dan elegan. Alih-alih, '...'Anda juga dapat menggunakan entitas HTML untuk ellipsis:'…'

Tom Harrison

mungkin solusi yang paling tidak menyakitkan. Tetap ingat bahwa filter relatif berat dan ini mungkin memiliki masalah kinerja pada daftar ng-repeat yang sangat besar! :)

Cowwando

1

luar biasa! apakah ada cara untuk memotong setelah beberapa baris, daripada setelah beberapa karakter?

axd

@ Maxd Anda harus mencobanya di css atau menulis arahan untuk mencapainya.

Pemerintah

1

Ini jawaban terbaik. Performa hit harus diabaikan dengan jumlah ng-repeat yang masuk akal. Jika Anda membawa kembali ratusan ng-repeat dengan konten yang perlu dipotong maka mungkin perlu kembali ke papan gambar. Jawaban yang bagus, @Govan

erier

59

Saya tahu ini terlambat, tetapi dalam versi terbaru dari angularjs (Saya menggunakan 1.2.16) filter limitTo mendukung string dan juga array sehingga Anda dapat membatasi panjang string seperti ini:

{{ "My String Is Too Long" | limitTo: 9 }}

yang akan menghasilkan:

My String

ramping
sumber

9

Solusi ini tidak memiliki "...". Hasilnya harus: "Senar Saya ..."

Snæbjørn

Saya tidak melihat elips di sini: plnkr.co/edit/HyAejS2DY781bqcT0RgV?p=preview . Bisakah Anda menguraikan?

langsing

2

Apa yang dikatakan @ Snæbjørn adalah bahwa orang yang mengajukan pertanyaan lebih memilih solusi yang memasukkan "..." di akhir string yang terpotong. Jawaban Govan melakukan itu.

Nahn

@Nah, terima kasih sudah menunjukkannya. Saya mungkin harus membuat komentar untuk jawaban EpokK daripada jawaban lain.

langsing

52

Anda cukup menambahkan kelas css ke div, dan menambahkan tip alat melalui angularjs sehingga teks yang dipangkas akan terlihat di mouse.

<div class="trim-info" tooltip="{{modal.title}}">{{modal.title}}</div>

   .trim-info {
      max-width: 50px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;  
      line-height: 15px;
      position: relative;
   }

Sushrut
sumber

4

text-overflow: ellipsis, bagus.

Chris Russo

4

teknik ini, walaupun mengagumkan, mencegah pembungkus teks

Larry

Ini jawaban yang benar. Aturan umum saya adalah: "jangan lakukan dalam JavaScript apa yang bisa dilakukan dalam CSS".

Aidan

4

Ini hanya berfungsi untuk teks dengan satu baris per paragraf. Lihat untuk multiline css-tricks.com/line-clampin (tidak semua browser mendukungnya).

Robert

Ini juga berfungsi jika Anda mencoba membatasi panjang array ng-repeat.

chakeda

27

Saya punya masalah serupa, berikut ini yang saya lakukan:

{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}

crc442
sumber

Saya akan menghapus spasi putih di antara kedua output untuk menghindari jeda baris

Ignacio Vazquez

21

< div >{{modal.title | limitTo:20}}...< / div>

Thiago Araújo
sumber

Pendekatan sederhana, namun fungsional. Tetapi diasumsikan bahwa setiap judul akan memiliki lebih dari 20 karakter dan ini, dalam beberapa kasus, mungkin tidak terduga.

Henrique M.

18

Solusi yang lebih elegan:

HTML:

<html ng-app="phoneCat">
  <body>
    {{ "AngularJS string limit example" | strLimit: 20 }}
  </body>
</html>

Kode Sudut:

 var phoneCat = angular.module('phoneCat', []);

 phoneCat.filter('strLimit', ['$filter', function($filter) {
   return function(input, limit) {
      if (! input) return;
      if (input.length <= limit) {
          return input;
      }

      return $filter('limitTo')(input, limit) + '...';
   };
}]);

Demo:

http://code-chunk.com/chunks/547bfb3f15aa1/str-limit-implementation-for-angularjs

Anam
sumber

Dapatkah saya menyarankan menambahkan pengembalian jika inputnilainya dinamis? yaitu kalau if (!input) {return;}tidak akan ada kesalahan konsol JS

mcranston18

1

@ mcranston18 menambahkan. Terima kasih.

Anam

15

Karena kita membutuhkan ellipsis hanya ketika panjang string melebihi batas, tampaknya lebih tepat untuk menambahkan ellipsis dengan menggunakan ng-ifdaripada mengikat.

{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">&hellip;</span>

mnishiguchi
sumber

7

Ada opsi

.text {
            max-width: 140px;
            white-space: nowrap;
            overflow: hidden;
            padding: 5px;
            text-overflow: ellipsis;(...)
        }

<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi qui soluta labore! Facere nisi aperiam sequi dolores voluptatum delectus vel vero animi, commodi harum molestias deleniti, quasi nesciunt. Distinctio veniam minus ut vero rerum debitis placeat veritatis doloremque laborum optio, nemo quibusdam ad, sed cum quas maxime hic enim sint at quos cupiditate qui eius quam tempora. Ab sint in sunt consequuntur assumenda ratione voluptates dicta dolor aliquid at esse quaerat ea, veritatis reiciendis, labore repellendus rem optio debitis illum! Eos dignissimos, atque possimus, voluptatibus similique error. Perferendis error doloribus harum enim dolorem, suscipit unde vel, totam in quia mollitia.</div>

Luaskan cuplikan

Aleksandr Havrylov
sumber

7

Solusi paling sederhana yang saya temukan untuk membatasi panjang string adalah {{ modal.title | slice:0:20 }}, dan kemudian meminjam dari @Govan di atas dapat Anda gunakan {{ modal.title.length > 20 ? '...' : ''}}untuk menambahkan titik-titik suspensi jika string lebih panjang dari 20, sehingga hasil akhirnya adalah:

{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

maudulus
sumber

4

Berikut filter khusus untuk memotong teks. Ini terinspirasi oleh solusi EpokK tetapi dimodifikasi untuk kebutuhan dan selera saya.

angular.module('app').filter('truncate', function () {

    return function (content, maxCharacters) {

        if (content == null) return "";

        content = "" + content;

        content = content.trim();

        if (content.length <= maxCharacters) return content;

        content = content.substring(0, maxCharacters);

        var lastSpace = content.lastIndexOf(" ");

        if (lastSpace > -1) content = content.substr(0, lastSpace);

        return content + '...';
    };
});

Dan di sini adalah unit test sehingga Anda dapat melihat bagaimana seharusnya berperilaku:

describe('truncate filter', function () {

    var truncate,
        unfiltered = " one two three four ";

    beforeEach(function () {

        module('app');

        inject(function ($filter) {

            truncate = $filter('truncate');
        });
    });

    it('should be defined', function () {

        expect(truncate).to.be.ok;
    });

    it('should return an object', function () {

        expect(truncate(unfiltered, 0)).to.be.ok;
    });

    it('should remove leading and trailing whitespace', function () {

        expect(truncate(unfiltered, 100)).to.equal("one two three four");
    });

    it('should truncate to length and add an ellipsis', function () {

        expect(truncate(unfiltered, 3)).to.equal("one...");
    });

    it('should round to word boundaries', function () {

        expect(truncate(unfiltered, 10)).to.equal("one two...");
    });

    it('should split a word to avoid returning an empty string', function () {

        expect(truncate(unfiltered, 2)).to.equal("on...");
    });

    it('should tolerate non string inputs', function () {

        expect(truncate(434578932, 4)).to.equal("4345...");
    });

    it('should tolerate falsey inputs', function () {

        expect(truncate(0, 4)).to.equal("0");

        expect(truncate(false, 4)).to.equal("fals...");
    });
});

SharkAlley
sumber

3

Anda dapat membatasi panjang string atau array dengan menggunakan filter. Periksa ini ditulis oleh tim AngularJS.

MAM
sumber

berikan beberapa rincian lebih lanjut juga

Parixit

3

Dalam html ini digunakan bersama dengan filter limitTo yang disediakan oleh angular itu sendiri seperti di bawah ini ,

    <p> {{limitTo:30 | keepDots }} </p>

filter keepDots:

     App.filter('keepDots' , keepDots)

       function keepDots() {

        return function(input,scope) {
            if(!input) return;

             if(input.length > 20)
                return input+'...';
            else
                return input;

        }


    }

Shushanth Pallegar
sumber

3

Jika Anda menginginkan sesuatu seperti: InputString => StringPart1 ... StringPart2

HTML:

<html ng-app="myApp">
  <body>
    {{ "AngularJS string limit example" | strLimit: 10 : 20 }}
  </body>
</html>

Kode Sudut:

 var myApp = angular.module('myApp', []);

 myApp.filter('strLimit', ['$filter', function($filter) {
   return function(input, beginlimit, endlimit) {
      if (! input) return;
      if (input.length <= beginlimit + endlimit) {
          return input;
      }

      return $filter('limitTo')(input, beginlimit) + '...' + $filter('limitTo')(input, -endlimit) ;
   };
}]);

Contoh dengan parameter berikut:
beginLimit = 10
endLimit = 20

Sebelum : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
Setelah : - /home/hous...3720DF6680E17036.jar

vhamon
sumber

2

Use this in your html - {{value | limitTocustom:30 }}

and write this custom filter in your angular file,

app.filter('limitTocustom', function() {
    'use strict';
    return function(input, limit) {
        if (input) {
            if (limit > input.length) {
                return input.slice(0, limit);
            } else {
                return input.slice(0, limit) + '...';
            }
        }
    };
});

// if you initiate app name by variable app. eg: var app = angular.module('appname',[])

Mohideen bin Mohammed
sumber

2

Ini mungkin bukan dari akhir skrip tetapi Anda dapat menggunakan css di bawah ini dan menambahkan kelas ini ke div. Ini akan memotong teks dan juga menampilkan teks lengkap di atas mouse. Anda dapat menambahkan lebih banyak teks dan menambahkan hadler klik sudut untuk mengubah kelas div di cli

.ellipseContent {
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

    .ellipseContent:hover {
        overflow: visible;
        white-space: normal;
    }

Kurkula
sumber

2

Jika Anda memiliki dua binding {{item.name}}dan{{item.directory}} .

Dan ingin menampilkan data sebagai direktori diikuti dengan nama, dengan asumsi '/ root' sebagai direktori dan 'Mesin' sebagai nama (/ root-mesin).

{{[item.directory]+[isLast ? '': '/'] + [ item.name]  | limitTo:5}}

Harish Reddy Pothula
sumber

Apakah ada kemungkinan Anda memposting jawaban ini pada pertanyaan yang salah? Tampaknya ini tidak ada hubungannya dengan membatasi panjang string dengan AngularJS.

BSMP

1

Anda dapat menggunakan modul npm ini: https://github.com/sparkalow/angular-truncate

Suntikkan filter terpotong ke modul aplikasi Anda seperti ini:

var myApp = angular.module('myApp', ['truncate']);

dan terapkan filter di aplikasi Anda dengan cara ini:

{{ text | characters:20 }}

Mel Michael
sumber

1

<div>{{modal.title | slice: 0: 20}}</div>

Vara
sumber

0

Saya membuat arahan ini yang dengan mudah melakukan itu, memotong string ke batas yang ditentukan dan menambahkan "show more / less" toggle. Anda dapat menemukannya di GitHub: https://github.com/doukasd/AngularJS-Components

dapat digunakan seperti ini:

<p data-dd-collapse-text="100">{{veryLongText}}</p>

Inilah arahannya:

// a directive to auto-collapse long text
app.directive('ddCollapseText', ['$compile', function($compile) {
return {
    restrict: 'A',
    replace: true,
    link: function(scope, element, attrs) {

        // start collapsed
        scope.collapsed = false;

        // create the function to toggle the collapse
        scope.toggle = function() {
            scope.collapsed = !scope.collapsed;
        };

        // get the value of the dd-collapse-text attribute
        attrs.$observe('ddCollapseText', function(maxLength) {
            // get the contents of the element
            var text = element.text();

            if (text.length > maxLength) {
                // split the text in two parts, the first always showing
                var firstPart = String(text).substring(0, maxLength);
                var secondPart = String(text).substring(maxLength, text.length);

                // create some new html elements to hold the separate info
                var firstSpan = $compile('<span>' + firstPart + '</span>')(scope);
                var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope);
                var moreIndicatorSpan = $compile('<span ng-if="!collapsed">...</span>')(scope);
                var toggleButton = $compile('<span class="collapse-text-toggle" ng-click="toggle()">{{collapsed ? "less" : "more"}}</span>')(scope);

                // remove the current contents of the element
                // and add the new ones we created
                element.empty();
                element.append(firstSpan);
                element.append(secondSpan);
                element.append(moreIndicatorSpan);
                element.append(toggleButton);
            }
        });
    }
};
}]);

Dan beberapa CSS untuk digunakan:

.collapse-text-toggle {
font-size: 0.9em;
color: #666666;
cursor: pointer;
}
.collapse-text-toggle:hover {
color: #222222;
}
.collapse-text-toggle:before {
content: '\00a0(';
}
.collapse-text-toggle:after {
content: ')';
}

Dimitris
sumber

0

Solusi ini murni menggunakan ng tag pada HTML.

Solusinya adalah membatasi teks panjang yang ditampilkan dengan tautan 'tunjukkan lebih lanjut ...' di bagian akhir. Jika pengguna mengeklik tautan 'tunjukkan lebih lanjut ...', itu akan menampilkan seluruh teks dan menghapus tautan 'tampilkan lebih banyak ...'.

HTML:

<div ng-init="limitText=160">
   <p>{{ veryLongText | limitTo: limitText }} 
       <a href="javascript:void(0)" 
           ng-hide="veryLongText.length < limitText" 
           ng-click="limitText = veryLongText.length + 1" > show more..
       </a>
   </p>
</div>

Amirul
sumber

0

SOLUSI TERMUDAH -> yang saya temukan adalah membiarkan Material Design (1.0.0-rc4) melakukan pekerjaannya. The md-input-containerakan melakukan pekerjaan untuk Anda. Ini merangkai string dan menambahkan elipses plus memiliki keuntungan ekstra memungkinkan Anda mengkliknya untuk mendapatkan teks lengkap sehingga seluruh enchilada. Anda mungkin perlu mengatur lebar md-input-container.

HTML:

<md-input-container>
   <md-select id="concat-title" placeholder="{{mytext}}" ng-model="mytext" aria-label="label">
      <md-option ng-selected="mytext" >{{mytext}}
      </md-option>
   </md-select>
</md-input-container>

CS:

#concat-title .md-select-value .md-select-icon{
   display: none; //if you want to show chevron remove this
}
#concat-title .md-select-value{
   border-bottom: none; //if you want to show underline remove this
}

Helzgate
sumber

0

Batasi jumlah kata dengan filter Angular khusus: Berikut adalah cara saya menggunakan filter Angular untuk membatasi jumlah kata yang ditampilkan menggunakan filter khusus.

HTML:

<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>

Kode Sudut / Javascript

angular.module('app')
.filter('limitWordsTo', function () {
    return function (stringData, numberOfWords) {
        //Get array of words (determined by spaces between words)
        var arrayOfWords = stringData.split(" ");

        //Get loop limit
        var loopLimit = numberOfWords > arrayOfWords.length ? arrayOfWords.length : numberOfWords;

        //Create variables to hold limited word string and array iterator
        var limitedString = '', i;
        //Create limited string bounded by limit passed in
        for (i = 0; i < loopLimit; i++) {
            if (i === 0) {
                limitedString = arrayOfWords[i];
            } else {
                limitedString = limitedString + ' ' + arrayOfWords[i];
            }
        }
        return limitedString;
    }; 
}); //End filter

Geoff
sumber

0

Ini berfungsi baik untuk saya 'Dalam rentang', ng-show = "MyCtrl.value. $ ViewValue.length> your_limit" ... baca selengkapnya. 'rentang akhir'

GK
sumber

0

Saya menggunakan seperangkat pustaka filter yang berguna "Angular-filter" dan salah satunya disebut "truncate" juga berguna.

https://github.com/a8m/angular-filter#truncate

penggunaannya adalah:

text | truncate: [length]: [suffix]: [preserve-boolean]

Lukas Jelinek
sumber

Batasi panjang string dengan AngularJS

Jawaban:

Pemakaian:

Pilihan: