AngularJS এর ​​সাথে তালিকা বিভাজক হিসাবে কমা ব্যবহার করা Using

Question

আমার আইটেমগুলির একটি কমা-বিচ্ছিন্ন তালিকা তৈরি করতে হবে:

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

অ্যাঙ্গুলারজেএস ডকুমেন্টেশন অনুসারে, কোনও নিয়ন্ত্রণ প্রবাহ বিবৃতি প্রকাশে অনুমোদিত নয়। এই কারণেই আমার {{$last ? '' : ', '}}কাজ হয় না।

কমা-বিচ্ছিন্ন তালিকা তৈরির বিকল্প উপায় আছে কি?

সম্পাদনা 1 এর
চেয়ে সহজ কিছু আছে:

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

Comments

আপনি সর্বদা (পরে আপনি পরিবর্তন এইচটিএমএল যখন আপনার বসের পৃথক লাইন ইত্যাদি তাদের চায় প্রয়োজন হবে না) এই ভাবে বিন্যাস তালিকাতে সিএসএস ব্যবহার করতে পারেন - দেখুন stackoverflow.com/questions/1517220/...

— AlexFoxGill

Answer 1

আপনি এটি এইভাবে করতে পারেন:

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

.. তবে আমি ফিলিপের উত্তরটি পছন্দ করি :-)

Comments

($last && '' || ', ')সবসময় ফলন করা উচিত নয় ', '?

— Okm

ঠিক আছে ওকামের মতো, আমি সঠিকভাবে মূল্যায়নের জন্য কৌনিকটি পাইনি a শেষ পর্যন্ত সত্য বা মিথ্যা কোনও টেম্পলেটের মধ্যে। আমি এই ব্যবহৃত: {{{true: '', false: ', '}[$last]}}। এই কৌশলটি ব্যবহারের চেয়ে আরও নমনীয় .joinকারণ এটি তালিকার উপাদানগুলিকে প্রতিটি অ্যারের সদস্য হতে দেয়, যেমন:<b ng-repeat="friend in friends">{{friend.email}}{{{true: '', false: ', '}[$last]}}</b>

— রায়ান মার্কাস

টার্নারি অপারেটরগুলি ব্যবহার করার জন্য আপডেট হয়েছে

— অ্যান্ড্রু জোসলিন

আমি কীভাবে printedোকাতে এবং মুদ্রিত অ্যারেটিতে যাতে আমার অ্যারেটি দেখতে এমন লাগে: জন, মাইক এবং নীল। নির্দেশ ব্যবহার না করে এই ফর্ম্যাটটি কীভাবে পাবেন।

— মাত্যা

আমি এই পদ্ধতির ব্যবহার করছি যেহেতু এটি আমাকে তালিকার প্রতিটি মানের একটি ফিল্টার ব্যবহার করতে দেয়।

— সি ফেয়ারওয়েদার

Answer 2

join(separator)অ্যারেগুলির জন্য কেবল জাভাস্ক্রিপ্টের অন্তর্নির্মিত ফাংশনটি ব্যবহার করুন:

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

Comments

আপনি যদি এইচটিএমএল-ইশ বিভাজক চান তবে সম্ভবত এটি লেখার নির্দেশের সময় । আপনি এইচটিএমএলকে join()এইচটিএমএল এড়িয়ে চলা নিষ্ক্রিয় করতে পারেন , তবে এর জন্য জাহান্নামের একটি বিশেষ জায়গা রয়েছে;)

— ফিলিপ রেচার্ট

ভাল লাগল, আমি এটিকে এভাবে ব্যবহার করার কথা ভাবিনি।

— স্ট্রবেরি

@DavidKEgghead আমি পৃথক, প্রার্থনা করা jsfiddle.net/wuZRA । এটি আপনার পক্ষে কীভাবে কাজ করে না?

— ফিলিপ রেচার্ট

@ ফিলিপ রিচার্ট এই বিলম্বের জন্য দুঃখিত এখানে একটি উদাহরণ রয়েছে: 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(', ') }}কেন?

— ফিলিপ রেচার্ট

আমি নিশ্চিত নই যে অ্যাঙ্গুলারজেএস-এ জাভাস্ক্রিপ্ট মূল ফাংশনগুলি পুনরায় লেখাই সত্যই "কৌণিক উপায়ে" ...

— মাইকেল কোল

এই উত্তরটি দেখায় যে কৌণিক কীভাবে বস্তুর অ্যারেগুলির জন্য মূল্য যুক্ত করতে পারে

— মাইকেল কোল

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

এটিও ঠিক করতে আপনি সিএসএস ব্যবহার করতে পারেন

<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

আমিও একটি কাস্টম ফিল্টারের জন্য যেতে চাই, তবে আমি আপনার ধারণাটি পছন্দ করি :)

— জেবিসি

Answer 6

আমি মনে করি এটি ব্যবহার করা ভাল ng-if। ng-showএর মধ্যে একটি উপাদান তৈরি করে domএবং সেট করে display:none। domআপনার সংখ্যার যত বেশি সংখ্যক উপাদান ক্ষুধার্ত রয়েছে সেগুলি আপনার অ্যাপ্লিকেশন হয়ে যায় এবং নিম্ন সংস্থানযুক্ত ডিভাইসগুলিতে কম domউপাদানগুলি তত ভাল।

টিবিএইচ <span ng-if="!$last">, </span>এটি করার দুর্দান্ত উপায় বলে মনে হচ্ছে। ইহা সহজ.

Comments

আমি এই পদ্ধতির পছন্দ করি, কারণ এটি সহজ এবং এখনও এইচটিএমএল ভিত্তিক বিভাজককে সমর্থন করে। ধন্যবাদ @ the7erm!

— alexkb

Answer 7

যেহেতু এই প্রশ্নটি বেশ পুরানো এবং অ্যাংুলার জেএসের তখন থেকেই বিকশিত হওয়ার সময় ছিল, এখন এটি ব্যবহার করে সহজেই অর্জন করা যেতে পারে:

<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 ? '' : ', '}}এটি কার্যকর হবে না কারণ এটি এখনও সমস্ত মান বিবেচনায় নেবে x উদাহরণ

<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 তে এই সমস্যাটি কীভাবে একইভাবে সমাধান করা যায় সে সম্পর্কে কোনও পরামর্শ?

— চেনু