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



Answers

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

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

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

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

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

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




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

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




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

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



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

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

        }


    }



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

इसका उपयोग इस तरह किया जा सकता है:

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

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

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



मैं उपयोगी फिल्टर लाइब्रेरी "कोणीय-फ़िल्टर" का अच्छा सेट उपयोग करता हूं और उनमें से एक "ट्रंकेट" भी कहा जाता है।

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

उपयोग है:

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



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



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

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

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




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



सबसे आसान समाधान -> मैंने पाया है कि सामग्री डिजाइन (1.0.0-आरसी 4) काम करना है। 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
}



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

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



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

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



Related