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




12 Answers

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

विकल्प:

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

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

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

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

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

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




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

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

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

My String



मुझे एक ही समस्या थी, मैंने यह किया है:

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



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

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



एक विकल्प है

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




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




यदि आप कुछ ऐसा चाहते हैं: इनपुटस्ट्रिंग => स्ट्रिंगपार्ट 1 ... स्ट्रिंगपार्ट 2

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




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

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

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



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

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

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

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

{{ text | characters:20 }} 



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

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

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



यह समाधान पूरी तरह से 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>



यह मेरे लिए 'अवधि में' ठीक है, ng-show = "MyCtrl.value। $ ViewValue.length> your_limit" ... और पढ़ें। 'अंत अवधि'




Related