AngularJS के साथ सूची विभाजक के रूप में अल्पविराम का उपयोग करना

Question

मुझे आइटमों की अल्पविराम से अलग सूची बनाने की आवश्यकता है:

  <li ng-repeat="friend in friends">
      <b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>...
  </li>

AngularJS प्रलेखन के अनुसार, अभिव्यक्ति में कोई नियंत्रण प्रवाह विवरण की अनुमति नहीं है। यही कारण है कि मेरा {{$last ? '' : ', '}}काम नहीं करता है।

क्या अल्पविराम से अलग सूची बनाने का एक वैकल्पिक तरीका है?

EDIT 1
की तुलना में कुछ सरल है:

<span ng-show="!$last">, </span>

Comments

आप हमेशा सीएसएस को प्रारूप सूची में इस तरह से उपयोग कर सकते हैं (तब आपको HTML को संशोधित करने की आवश्यकता नहीं होती है जब आपका बॉस उन्हें अलग-अलग लाइनों आदि पर चाहता है) - देखें stackoverflow.com/questions/1517220/…

— AlexFoxGill

Answer 1

आप इसे इस तरह से कर सकते हैं:

<b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>

..लेकिन मुझे फिलिप का जवाब पसंद है :-)

Comments

($last && '' || ', ')हमेशा उपज नहीं होनी चाहिए ', '?

— प्रात

ऊपर ओकेम, मैं एक टेम्पलेट के भीतर $ $ सही या गलत का अंतिम मूल्यांकन करने के लिए कोणीय नहीं हो सका। मैंने इसका उपयोग किया {{{true: '', false: ', '}[$last]}}:। यह तकनीक उपयोग करने की तुलना में अधिक लचीली है .joinक्योंकि यह सूची में तत्वों को एक सरणी के सदस्य होने की अनुमति देती है, जैसे:<b ng-repeat="friend in friends">{{friend.email}}{{{true: '', false: ', '}[$last]}}</b>

— रयान मार्कस

टर्नरी ऑपरेटरों का उपयोग करने के लिए अद्यतन

— एंड्रयू जोसलिन

मैं कैसे और मुद्रित सरणी में सम्मिलित कर सकता हूं ताकि मेरी सरणी इस तरह दिखे: जॉन, माइक और निल। निर्देश का उपयोग किए बिना इस प्रारूप को कैसे प्राप्त करें।

— मटका जूल

मैं इस दृष्टिकोण का उपयोग कर रहा हूं क्योंकि यह मुझे सूची में प्रत्येक मूल्य पर एक फिल्टर का उपयोग करने की अनुमति देता है।

— सी फेयरवेदर

Answer 2

join(separator)सरणियों के लिए जावास्क्रिप्ट के अंतर्निहित फ़ंक्शन का उपयोग करें:

<li ng-repeat="friend in friends">
  <b>{{friend.email.join(', ')}}</b>...
</li>

Comments

यदि आप HTML-ish विभाजक चाहते हैं, तो संभवतः यह एक निर्देश लिखने का समय है । आप HTML को HTML में भी डाल सकते हैं join()और HTML से बच सकते हैं, लेकिन इसके लिए नरक में एक विशेष स्थान है;)

— फिलिप रेचर्ट

अच्छा लगा, मैंने इसे इस तरह इस्तेमाल करने के बारे में सोचा भी नहीं था।

— स्ट्रॉबेरी

@DavidKEgghead मैं अलग, jsfiddle.net/wuZRA से भीख माँगता हूँ । यह आपके लिए कैसे काम नहीं करता है?

— फिलिप रीचर्ट

@PhilippReichart देरी के लिए खेद है। यहाँ एक उदाहरण है: jsfiddle.net/Sek8F - ऐसा लगता है जैसे आप एक स्ट्रिंग को लक्षित कर रहे हैं जहाँ मैं किसी वस्तु का संदर्भ दे रहा हूँ।

— रवि राम

Answer 3

इसके अलावा:

angular.module('App.filters', [])
    .filter('joinBy', function () {
        return function (input,delimiter) {
            return (input || []).join(delimiter || ',');
        };
    });

और टेम्पलेट में:

{{ itemsArray | joinBy:',' }}

Comments

यह उत्तर "कोणीय तरीका" दिखाता है और इसे सर्वश्रेष्ठ के रूप में चिह्नित किया जाना चाहिए।

— यूजीन ग्रिज़नोव

छह लाइनें क्यों नहीं बचतीं और बस {{ itemsArray.join(', ') }}?

— फिलिप रीचर्ट

मुझे यकीन नहीं है कि AngularJS में जावास्क्रिप्ट कोर फ़ंक्शंस को फिर से लिखना "वास्तव में" कोणीय तरीका है ...

— माइकल कोल

यह उत्तर दिखाता है कि कोणीय वस्तुओं की सरणियों के लिए मूल्य कैसे जोड़ सकता है

— माइकल कोल

Answer 4

.list-comma::before {
  content: ',';
}
.list-comma:first-child::before {
  content: '';
}

<span class="list-comma" ng-repeat="destination in destinations">
                            {{destination.name}}
                        </span>

Comments

यह सबसे "अर्थिक" तरीके से लगता है, क्योंकि अल्पविराम से अलग की गई सूची का उपयोग करने का विकल्प पूरी तरह से प्रस्तुति के बारे में है। यह सिर्फ एक सबलिस्ट हो सकता है।

— इलियट कैमरन

यह पहला उपाय था जो मेरे दिमाग में आया। जावास्क्रिप्ट पर कम निर्भर है।

— कल्पेश पांचाल

Answer 5

इसे ठीक करने के लिए आप CSS का उपयोग कर सकते हैं

<div class="some-container">
[ <span ng-repeat="something in somethings">{{something}}<span class="list-comma">, </span></span> ]
</div>

.some-container span:last-child .list-comma{
    display: none;
}

लेकिन एंडी जोसलिन का जवाब सबसे अच्छा है

संपादित करें: मैंने अपना मन बदल लिया है मुझे हाल ही में ऐसा करना पड़ा और मैंने एक जॉइन फिल्टर के साथ समाप्त कर दिया।

Comments

मैं एक कस्टम फ़िल्टर के लिए भी जाऊँगा, लेकिन मुझे आपका विचार पसंद आया :)

— JBC

Answer 6

मुझे लगता है कि इसका उपयोग करना बेहतर है ng-if। ng-showमें एक तत्व बनाता है domऔर इसे सेट करता है display:none। जितने अधिक domतत्व आपके पास होंगे उतने अधिक संसाधन आपके ऐप के भूखे होंगे, और कम संसाधनों वाले उपकरणों पर कम domतत्व बेहतर होंगे।

टीबीएच <span ng-if="!$last">, </span>इसे करने का एक शानदार तरीका लगता है। यह आसान है।

Comments

मुझे यह दृष्टिकोण पसंद है, क्योंकि यह सरल है और अभी भी html आधारित विभाजकों का समर्थन करता है। धन्यवाद @ the7erm!

— एलेक्सबेक

Answer 7

चूँकि यह प्रश्न काफी पुराना है और AngularJS के पास तब से विकसित होने का समय था, इसे अब आसानी से प्राप्त किया जा सकता है:

<li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>।

ध्यान दें कि मैं ngBindप्रक्षेप के बजाय उपयोग कर रहा हूं {{ }}क्योंकि यह बहुत अधिक प्रदर्शनशील है: ngBind केवल तभी चलेगा जब पारित मूल्य वास्तव में बदलता है। {{ }}दूसरी ओर, कोष्ठक को हर $ पचने में गंदा और ताज़ा किया जाएगा, भले ही यह आवश्यक न हो। स्रोत: यहाँ , यहाँ और यहाँ ।

angular
  .module('myApp', [])
  .controller('MyCtrl', ['$scope',
    function($scope) {
      $scope.records = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    }
  ]);

li {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>
  </ul>
</div>

अंतिम नोट पर, यहां के सभी समाधान काम करते हैं और आज तक मान्य हैं। मैं वास्तव में उन लोगों से मिला हूं जो सीएसएस को शामिल करते हैं क्योंकि यह एक प्रस्तुति समस्या का अधिक है।

Answer 8

मुझे सिम्बू का दृष्टिकोण पसंद है, लेकिन मैं पहले बच्चे या आखिरी बच्चे का उपयोग करने के लिए सहज नहीं हूं। इसके बजाय मैं केवल एक दोहराई जाने वाली सूची-कॉमा वर्ग की सामग्री को संशोधित करता हूं।

.list-comma + .list-comma::before {
    content: ', ';
}

<span class="list-comma" ng-repeat="destination in destinations">
    {{destination.name}}
</span>

Answer 9

यदि आप मानों को सीमित करने के लिए एनजी-शो का उपयोग कर रहे हैं, तो {{$last ? '' : ', '}}काम नहीं किया गया क्योंकि यह अभी भी सभी मूल्यों को ध्यान में रखेगा।

<div ng-repeat="x in records" ng-show="x.email == 1">{{x}}{{$last ? '' : ', '}}</div>

var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
  $scope.records = [
    {"email": "1"},
    {"email": "1"},
    {"email": "2"},
    {"email": "3"}
  ]
});

"अंतिम" मान के बाद अल्पविराम जोड़ने के परिणामस्वरूप , एनजी-शो के बाद से यह अभी भी सभी 4 मूल्यों को ध्यान में रखता है

{"email":"1"},
{"email":"1"},

एक समाधान सीधे एनजी-रिपीट में एक फिल्टर जोड़ना है

<div ng-repeat="x in records | filter: { email : '1' } ">{{x}}{{$last ? '' : ', '}}</div>

परिणाम

{"email":"1"},
{"email":"1"}

Comments

कस्टम पाइप बनाए बिना इस मुद्दे को एंगुलर 2 में उसी तरह से हल करने के बारे में कोई सुझाव?

— चेनू 12