AngularJS के साथ एक स्ट्रिंग की लंबाई को सीमित करें


225

मेरे पास निम्नलिखित हैं:

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

क्या कोई ऐसा तरीका है जिसे मैं 20 अक्षर कहने के लिए स्ट्रिंग की लंबाई को सीमित कर सकता हूं?

और इससे भी बेहतर सवाल यह होगा कि क्या कोई तरीका है जिससे मैं स्ट्रिंग को बदल सकता हूं और ...अंत में दिखा सकता हूं यदि यह 20 से अधिक वर्णों का हो?


जवाबों:


344

संपादित के नवीनतम संस्करण को AngularJSप्रदान करता है limitToफिल्टर

आपको इस तरह एक कस्टम फ़िल्टर की आवश्यकता है :

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 || ' …');
        };
    });

उपयोग:

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

विकल्प:

  • वर्डवाइज़ (बूलियन) - अगर सही है, केवल शब्दों की सीमा से काटें,
  • अधिकतम (पूर्णांक) - पाठ की अधिकतम लंबाई, वर्णों की इस संख्या में कटौती,
  • पूंछ (स्ट्रिंग, डिफ़ॉल्ट: '...') - यदि स्ट्रिंग काट दी गई थी, तो इस स्ट्रिंग को इनपुट स्ट्रिंग में जोड़ें।

एक अन्य उपाय : http://ngmodules.org/modules/angularjs-truncate (@Ehvince द्वारा)


2
वहाँ कोणीय-मॉड्यूल पर एक बराबर है: ngmodules.org/modules/angularjs-truncate
एह्वीन्स

angularjs-truncate समाधान नहीं है, लेकिन आपका IS समाधान है। धन्यवाद! इसे मॉड्यूल के रूप में बनाएं!
एंटोन बेसोनोव

@epokk उपयोगकर्ता को अनुमति देने का एक तरीका है, तीन बिंदुओं पर क्लिक करने के बाद, पूर्ण काटा हुआ पाठ दिखाएं? जैसे "और दिखाओ"? धन्यवाद!
थेल्स पी

यह ठीक काम करता है जब हम इसे इस तरह से {{post.post_content | कट: सच: १००: '... ’}} लेकिन विफल रहता है जब मैं इस तरह का उपयोग करता हूं <span ng-bind-html =" TrustHtml (post.post_content | cut: true: 100:' ... ') "> < / अवधि> क्योंकि मैं अपने मामले में विश्वसनीय html के साथ इसका उपयोग करने के लिए मजबूर हूं
S Vinesh

वर्डवाइज़ लिमिट एक अच्छी विशेषता है जो डिफ़ॉल्ट "लिमिट टू" में मौजूद नहीं है
pdizz

496

यहाँ सीएसएस के बिना सरल एक लाइन फिक्स है।

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

79
सरल और सुरुचिपूर्ण। इसके बजाय '...'आप ellipsis के लिए HTML इकाई का उपयोग भी कर सकते हैं:'&hellip;'
टॉम हैरिसन

शायद सबसे दर्द रहित समाधान। फिर भी ध्यान रखें कि फ़िल्टर अपेक्षाकृत भारी हैं और इसमें भारी एनजी-रिपीट सूची पर प्रदर्शन के मुद्दे हो सकते हैं! :)
काउवांडो

1
बहुत बढ़िया! क्या वर्णों की संख्या के बाद कई लाइनों के बाद कटौती करने का एक तरीका है?
axd

@axd आपको कोशिश करनी होगी कि css में या उसे प्राप्त करने के लिए एक निर्देश लिखें।
गोवन

1
यह सबसे अच्छा जवाब है। प्रदर्शन हिट एनजी-रिपीट की उचित संख्या के साथ नगण्य होना चाहिए। अगर आप सौ-सौ बार एनजी-रिपीट ला रहे हैं तो ऐसे कंटेंट के साथ जिसे ड्रॉ करने की जरूरत है तो ड्राइंग बोर्ड पर वापस जाने की जरूरत हो सकती है। अच्छा उत्तर, @ गवन
२१'१६ को ११:१२

59

मुझे पता है कि यह देर हो चुकी है, लेकिन एंगुलरज के नवीनतम संस्करण में (मैं 1.2.16 का उपयोग कर रहा हूं) लिमिटटीओ फिल्टर स्ट्रिंग्स के साथ-साथ सरणियों का समर्थन करता है ताकि आप स्ट्रिंग की लंबाई इस तरह से सीमित कर सकें:

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

जो उत्पादन करेगा:

My String

9
यह समाधान "..." याद आ रहा है। परिणाम यह होना चाहिए: "मेरी स्ट्रिंग ..."
Snæbjørn

मैं यहाँ दीर्घवृत्त नहीं देख रहा हूँ: plnkr.co/edit/HyAejS2DY781bqcT0RgV?p=preview । क्या आप विस्तार से समझा सकते हैं?
पतला

2
@ Sn thatbjørn क्या कह रहा है कि प्रश्न पूछने वाले व्यक्ति ने एक समाधान पसंद किया है जो कि "..." को काटे गए स्ट्रिंग के अंत में सम्मिलित करता है। गोवन का जवाब यही करता है।
नाहन

@ नाहन को इंगित करने के लिए धन्यवाद। मुझे शायद दूसरे जवाब के बजाय एपोकक के जवाब के लिए एक टिप्पणी करनी चाहिए थी।
स्लिम

52

आप बस div में एक css क्लास जोड़ सकते हैं, और angularjs के माध्यम से एक टूल टिप जोड़ सकते हैं ताकि माउस के ऊपर ट्रिम किया हुआ टेक्स्ट दिखाई दे।

<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;
   }

4
पाठ-अतिप्रवाह: दीर्घवृत्त, अच्छा एक।
क्रिस रुसो

4
यह तकनीक, कमाल करते हुए, पाठ को लपेटने से रोकती है
लैरी

यह सही जवाब है। मेरा सामान्य नियम है: "जावास्क्रिप्ट में ऐसा न करें जो सीएसएस में किया जा सकता है"।
असिस्टेंट

4
यह केवल प्रति पंक्ति एक पंक्ति के साथ पाठ के लिए काम करता है। मल्टीलाइन css-tricks.com/line-clampin के लिए देखें (सभी ब्राउज़र समर्थन नहीं करते हैं)।
राबर्ट

यदि आप किसी सरणी की लंबाई को सीमित करने का प्रयास कर रहे हैं तो भी यह काम करता है ng-repeat
चकेदा

27

मुझे भी इसी तरह की समस्या थी, यहाँ मैंने क्या किया:

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

मैं लाइन ब्रेक से बचने के लिए दोनों आउटपुटों के बीच व्हाट्सएप को हटा
दूंगा

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

सबसे सरल दृष्टिकोण, फिर भी कार्यात्मक। लेकिन यह मानता है कि प्रत्येक शीर्षक में 20 से अधिक अक्षर होंगे और यह, कुछ मामलों में, अप्रत्याशित हो सकता है।
हेनरिक एम।

18

अधिक सुरुचिपूर्ण समाधान:

HTML:

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

कोणीय कोड:

 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) + '...';
   };
}]);

डेमो:

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


क्या inputमूल्य के गतिशील होने की स्थिति में मैं रिटर्न जोड़ने का सुझाव दे सकता हूं ? यानी if (!input) {return;}अन्यथा इसमें जेएस कंसोल की त्रुटियां
होंगी

1
@ mcranston18 गयी। धन्यवाद।
आम

15

चूँकि हमें स्ट्रिंग की सीमा से अधिक होने पर ही इलिप्सिस की आवश्यकता होती है, इसलिए ng-ifबाइंडिंग की तुलना में इलिप्सिस जोड़ना अधिक उचित लगता है ।

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

7

एक विकल्प है

.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>


7

सबसे सरल समाधान जो मैंने स्ट्रिंग की लंबाई को सीमित करने के लिए पाया था {{ modal.title | slice:0:20 }}, और उसके बाद @Govan से उधार लेकर आप {{ modal.title.length > 20 ? '...' : ''}}निलंबन बिंदुओं को जोड़ने के लिए उपयोग कर सकते हैं यदि स्ट्रिंग 20 से अधिक है, तो अंतिम परिणाम बस है:

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

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


4

यहां पाठ को रौंदने का एक कस्टम फ़िल्टर है। यह EpokK के समाधान से प्रेरित है लेकिन मेरी जरूरतों और स्वाद के लिए संशोधित है।

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 + '...';
    };
});

और यहां इकाई परीक्षण हैं ताकि आप देख सकें कि यह कैसे व्यवहार करना चाहिए:

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...");
    });
});

3

आप एक फिल्टर का उपयोग करके एक स्ट्रिंग या एक सरणी की लंबाई को सीमित कर सकते हैं। जाँचAngularJS टीम द्वारा लिखित इस एक की करें


कुछ और विवरण भी प्रदान करें
Parixit

3

Html में इसका प्रयोग कोणीय फ़िल्टर के साथ किया जाता है जो नीचे कोणीय द्वारा ही प्रदान किया जाता है ,

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

फ़िल्टर रखें

     App.filter('keepDots' , keepDots)

       function keepDots() {

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

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

        }


    }

3

यदि आप कुछ ऐसा चाहते हैं: InputString => StringPart1 ... StringPart2

HTML:

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

कोणीय कोड:

 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) ;
   };
}]);

निम्नलिखित मापदंडों के साथ उदाहरण:
startLimit = 10
endLimit = 20

इससे पहले : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
उसके बाद : - /home/hous...3720DF6680E17036.jar


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',[])

2

यह स्क्रिप्ट के अंत से नहीं हो सकता है लेकिन आप नीचे दिए गए सीएसएस का उपयोग कर सकते हैं और इस वर्ग को div में जोड़ सकते हैं। यह पाठ को काट देगा और माउसओवर पर पूर्ण पाठ भी दिखाएगा। आप एक और पाठ जोड़ सकते हैं और क्ली पर डिव के वर्ग को बदलने के लिए कोणीय क्लिक हिटलर जोड़ सकते हैं

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

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

2

यदि आपके पास दो बाइंडिंग हैं {{item.name}}और {{item.directory}}

और नाम के बाद निर्देशिका के रूप में डेटा दिखाना चाहते हैं, निर्देशिका के रूप में '/' रूट और नाम के रूप में 'मशीन' (/ रूट-मशीन) मानते हैं।

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

क्या कोई मौका है जो आपने इस प्रश्न पर गलत उत्तर दिया है? यह AngularJS के साथ एक स्ट्रिंग की लंबाई को सीमित करने के साथ कुछ भी करने के लिए प्रकट नहीं होता है।
बीएसएमपी

1

आप इस npm मॉड्यूल का उपयोग कर सकते हैं: https://github.com/sparkalow/angular-truncate

इस तरह से अपने ऐप मॉड्यूल में ट्रंकट फिल्टर को इंजेक्ट करें:

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

और इस तरह से अपने ऐप में फ़िल्टर लागू करें:

{{ text | characters:20 }} 


0

मैंने यह निर्देश बनाया कि आसानी से ऐसा होता है, स्ट्रिंग को एक निर्दिष्ट सीमा तक काट देता है और "शो कम / ज्यादा" टॉगल जोड़ता है। आप इसे GitHub: https://github.com/doukasd/AngularJS-Compenter पर पा सकते हैं

यह इस तरह इस्तेमाल किया जा सकता है:

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

यहाँ निर्देश है:

// 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);
            }
        });
    }
};
}]);

और इसके साथ जाने के लिए कुछ CSS:

.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: ')';
}

0

यह समाधान विशुद्ध रूप से HTML पर एनजी टैग का उपयोग कर रहा है ।

इसका समाधान यह है कि इसके अंत में 'शो मोर ...' लिंक के साथ प्रदर्शित लंबे टेक्स्ट को सीमित करें। यदि उपयोगकर्ता 'और दिखाएं ...' लिंक पर क्लिक करता है, तो यह शेष पाठ को दिखाएगा और 'अधिक दिखाएं ...' लिंक को हटा देगा।

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>

0

सबसे आसान समाधान -> मैंने पाया है कि सामग्री डिजाइन (1.0.0-rc4) को काम करने देना है। आपके md-input-containerलिए काम करेंगे। यह स्ट्रिंग को सम्‍मिलित करता है और एलीपस जोड़ता है और इसके अतिरिक्त लाभ है कि आप इसे पूरा पाठ पाने के लिए इसे क्लिक करने की अनुमति दे सकते हैं ताकि यह संपूर्ण एनचिलाडा हो। की चौड़ाई निर्धारित करने की आवश्यकता हो सकती है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>

सीएस:

#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
}

0

एक कस्टम कोणीय फिल्टर के साथ शब्दों की संख्या को सीमित करें: यहां बताया गया है कि मैंने एक कस्टम फ़िल्टर का उपयोग करके प्रदर्शित शब्दों की संख्या को सीमित करने के लिए एक कोणीय फ़िल्टर का उपयोग किया है।

HTML:

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

कोणीय / जावास्क्रिप्ट कोड

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

0

यह मेरे लिए ठीक काम करता है 'इन स्पैन', एनजी-शो = "MyCtrl.value। $ ViewValue.length> your_limit" ... और पढ़ें 'अंत काल'


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.