অ্যারে দিয়ে পুনরাবৃত্তি করার পরিবর্তে সংজ্ঞায়িত সংখ্যার বার এনজি-রিপিট করার উপায়?


417

ng-repeatঅ্যারে দিয়ে সর্বদা পুনরাবৃত্তি হওয়ার পরিবর্তে কি সংজ্ঞায়িত সংখ্যার কোনও উপায় আছে ?

উদাহরণস্বরূপ, নীচে আমি তালিকার আইটেমটি 5 বার হিসাবে 5 টি $scope.numberসমান ধরে বাড়িয়ে দেখানোর জন্য চাই যাতে প্রতিটি তালিকা আইটেম 1, 2, 3, 4, 5 এর মতো বৃদ্ধি হয়

কাঙ্ক্ষিত ফলাফল:

<ul>
   <li><span>1</span></li>
   <li><span>2</span></li>
   <li><span>3</span></li>
   <li><span>4</span></li>
   <li><span>5</span></li>
</ul>


উত্তর:


569

আপডেট (9/25/2018)

অ্যাঙ্গুলারজেএস (> = 1.3.0) এর নতুন সংস্করণগুলি আপনাকে কেবলমাত্র একটি ভেরিয়েবলের সাথে এটি করার অনুমতি দেয় (কোনও ফাংশনের প্রয়োজন নেই):

<li ng-repeat="x in [].constructor(number) track by $index">
    <span>{{ $index+1 }}</span>
</li>
$scope.number = 5;

প্রশ্নটি প্রথম জিজ্ঞাসা করা সময়ে এটি সম্ভব ছিল না। এই আপডেটের জন্য নীচের উত্তর থেকে নিখিল নাম্বিয়ারকে ক্রেডিট করুন


আসল (5/29/2013)

এই মুহুর্তে, ng-repeatকেবলমাত্র প্যারামিটার হিসাবে একটি সংগ্রহ গ্রহণ করে তবে আপনি এটি করতে পারেন:

<li ng-repeat="i in getNumber(number)">
    <span>{{ $index+1 }}</span>
</li>

এবং আপনার নিয়ামকের কোথাও:

$scope.number = 5;
$scope.getNumber = function(num) {
    return new Array(num);   
}

এটি $scope.numberআপনাকে খুশি হিসাবে যে কোনও সংখ্যায় পরিবর্তন করতে দেয় এবং এখনও আপনি যে বাঁধাইটি খুঁজছেন তা বজায় রাখার অনুমতি দেয়।

সম্পাদনা (1/6/2014) - অ্যাঙ্গুলারজেএস (> = 1.1.5) এর আরও নতুন সংস্করণগুলির প্রয়োজন track by $index:

<li ng-repeat="i in getNumber(number) track by $index">
    <span>{{ $index+1 }}</span>
</li>

একই getNumberফাংশনটি ব্যবহার করে বেশ কয়েকটি তালিকার সাথে একটি ঝাঁকুনি দেওয়া হচ্ছে


আমি একাধিক তালিকা আইটেমের জন্য এটি ব্যবহার করছি তবে এটি কেবল প্রথম তালিকার জন্য কাজ করবে বলে মনে হচ্ছে। কেন জানি এই ঘটনা?
Malcr001

এটি যে কোনও সংখ্যক তালিকার জন্য কাজ করা উচিত। পরীক্ষা করে দেখুন এই বেহালার
ড্যান

1
আবার ধন্যবাদ. আমি প্যারেন্ট এলিমেন্টের এনজি-রিপিট মুছে ফেলতে ভুলে গেছি। এটা এখন কাজ করছে. ধন্যবাদ।
Malcr001

3
$ স্কোপ.গেটমম্বার = ফাংশন (নাম্বার) {ভ্যার এক্স = নতুন অ্যারে (); (var i = 0; i <num; i ++) {x.push (i + 1) এর জন্য; } রিটার্ন এক্স;
dyn

1
@ sh0ber। যখন নাম্বার ড্রপডাউনতে নির্বাচিত মানের উপর ভিত্তি করে তালিকা আইটেমগুলি পরিবর্তন করতে হবে। আমি প্রথমে আপনার ফাংশনটি চেষ্টা করেছিলাম, যখন এটি কাজ করে না, আমি এটির উপরে আপডেট করে নম্বরটি আপডেট করতে পারি। ড্রপডাউনতে বিভিন্ন নম্বর নির্বাচন করা হলে তালিকার আইটেমগুলির তালিকা। আপনি দয়া করে আপনার ফাংশনটি ব্যবহার করে আমার পরিস্থিতিটি পরীক্ষা করতে পারেন।
মানভেন্ধের

135

তুমি এটি করতে পারো:

<div ng-repeat="i in [1, 2, 3, 4]">
  ...
</div>

1
মোহন হিসাবে কাজ করেছে, ক্রোম বনাম 39.0.2171.95 (-৪-বিট), এফএফ বনাম ৩৩.১.১ এবং সাফারি বনাম
৮.০.২

আপনি যদি পৃষ্ঠাগুলি নিয়ন্ত্রণে এটি ব্যবহার করেন তবে এটি আপনার নিখুঁতভাবে কাজ করে you <li> <a href = "জাভাস্ক্রিপ্ট :;" এনজি-ক্লিক = "সিলেক্টপেজ ($ সূচক)"> {{আমি}} </a> </li>
রিক

@ আদিত্য এমএমপি, জাভাস্ক্রিপ্ট
স্ট্যাকওভারফ্লো.com

1
এই উত্তরে বর্ণিত হিসাবে গতিশীল দৈর্ঘ্যের অ্যারের জন্য অ্যারে কনস্ট্রাক্টরকে কল করার বিষয়ে বিবেচনা করুন ।
ম্যাক্সথ হাজার হাজার

আমি যদি 120 বার পুনরাবৃত্তি করতে হয়। আমি কি [1,2,3 ... 120] এর সাথে যেতে পারি?
মুনখদেলগার তুমেনবায়ের

94

আপনি কীভাবে এটি করতে পারেন তার উদাহরণ এখানে। নোট করুন যে আমি এনজি-রিপিট ডক্সের একটি মন্তব্যে অনুপ্রাণিত হয়েছি: http://jsfiddle.net/digitalzebra/wnWY6/

এনজি-পুনরাবৃত্তি নির্দেশকে নোট করুন:

<div ng-app>
    <div ng-controller="TestCtrl">
        <div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div>
    </div>
</div>

নিয়ন্ত্রকটি এখানে:

function TestCtrl($scope) {
    $scope.range = function(n) {
        return new Array(n);
    };
};

8
_.rangeঅ্যারে তৈরি করতে আপনি ইন্ডোরস্কোর বা লোডাশ থেকেও ব্যবহার করতে পারেন: $ સ્કોপ.আরঞ্জ = _.আরঞ্জ (0, এন);
বিকেলে

83

আমি মনে করি এই থ্রেড থেকে এই জেএসফিডেলটি আপনি যা খুঁজছেন তা হতে পারে।

<div ng-app ng-controller="Main">
   <div ng-repeat="item in items | limitTo:2">
       {{item.name}}
   </div>
</div>

3
গুগল থ্রেড লিঙ্কে আরও পড়ুন এবং এটি কীভাবে আপনি 'স্লাইস' ব্যবহার করতে পারবেন তা বর্ণনা করে। যেমন গ্রুপ 1: আইটেম.স্লাইস (0,3), গ্রুপ 2: আইটেম.স্লাইস (3,6), ইত্যাদি
ট্রেভরেক

7
এই উত্তরের ফলে আপনার নিয়ন্ত্রকদের মধ্যে সর্বাধিক ন্যূনতম পদচিহ্ন হবে এবং আমি বিশ্বাস করি এটিও পছন্দের কৌণিক পদ্ধতির। আইএমও গৃহীত উত্তরগুলি এর সাথে প্রতিস্থাপন করা উচিত।
ম্যাট জেনসেন

1
এটি গ্রহণযোগ্য উত্তর হওয়া উচিত (আমার মতে) - সর্বাধিক মার্জিত, সর্বাধিক এনজি-প্রিফার্ড।
কোডি

11
@ কোডি দুর্ভাগ্যক্রমে, না এটি প্রশ্নের উত্তর দেয় না। ওপি "সর্বদা একটি অ্যারের উপরে পুনরাবৃত্তি করার পরিবর্তে" এবং " $scope.number5 এর সমান ধরে" বলে উল্লেখ করে। উদ্দেশ্যটি হ'ল আইটেমের সংখ্যা নির্ধারণের জন্য একটি পূর্ণসংখ্য পরিবর্তনশীল ব্যবহার করা, এটি হার্ডকোড নয় এবং পূর্বনির্ধারিত অ্যারে ব্যবহার না করা not
ড্যান

5
@ কোডি @ sh0ber আপনি নিজের ক্ষেত্রের সীমাটি নির্ধারণ করতে পারেন ( $scope.limit = 2) এবং এটির মতো ব্যবহার করতে পারেন ...|limitTo:limit- আপডেট
ফিডাল

58

একটি সহজ পদ্ধতির হতে হবে (5 বার উদাহরণ হিসাবে):

<div ng-repeat="x in [].constructor(5) track by $index">
       ...
</div>

5
উজ্জ্বল। একটি নতুন অ্যারে ফিরিয়ে আনার জন্য নিয়ামকটিতে পঠনযোগ্য, সংক্ষিপ্ত এবং কোনও নির্বোধ কাজ নয়।
ম্যাক্সথ হাজার হাজার

2
আমি এইভাবে ভালবাসি।
রাব্বি শুকী গুরু

উত্সাহিত, প্রথম যখন প্রশ্ন জিজ্ঞাসা করা হয়েছিল তখন এটি সম্ভব ছিল না (কৌণিক 1.2)। এটি অন্তর্ভুক্ত করার জন্য আমি গৃহীত উত্তরটি পরিবর্তন করেছি। সুন্দর কাজ!
ড্যান

1
আমি কেবল ইচ্ছে করেই বুঝতে পারি যে এই বাক্য গঠনটি কেন কাজ করে তবে না Array(5)(বা সত্যিকার অর্থে [...Array(5).keys()][0,1,2,3,4] পেতে)
ডিলান নিকলসন

50

আমি একই ইস্যু মধ্যে দৌড়ে। আমি এই থ্রেড জুড়ে এসেছি, তবে তারা এখানে যে পদ্ধতিগুলি করেছিল তা পছন্দ করি না। আমার সমাধানটি আন্ডারস্কোর.জেএস ব্যবহার করছিল যা আমরা ইতিমধ্যে ইনস্টল করেছি। এটি এর মতোই সহজ:

<ul>
    <li ng-repeat="n in _.range(1,6)"><span>{{n}}</span></li>
</ul>

এটি আপনি যা খুঁজছেন ঠিক তা করবে।


27
এটি ভাল, তবে মনে রাখবেন যে ডিফল্টরূপে অ্যান্ডস্কোর স্কোপটিতে নেই - আপনি এটির মতো কিছু না করে আপনার HTML ভিউতে এটি ব্যবহার করতে সক্ষম হবেন না $scope._ = _
jedd.ahyoung

6
আপনি যদি লড্যাশ বা আন্ডারস্কোর ব্যবহার করছেন তবে আপনার এটি রাখা উচিত $rootScopeযাতে এটি সর্বত্র ব্যবহার করা যায়। এটিকে আপনার app.runফাংশনে রেখে দিন app.config: app.run(function ($rootScope) { $rootScope._ = _; });
জেরেমি মরিটজ

এটি আমার জন্য একটি নিখুঁত উত্তর ছিল। এটা সহজ এবং খুব সোজা। যেহেতু আমি একটি ভেরিয়েবল ব্যবহার করে পুনরাবৃত্তি করছিলাম যার একটি গণনা ছিল, তাই আমাকে এনজি-রিপিট = "এন-এ _আরেঞ্জ (1, গণনা + 1) করতে হয়েছিল। সমাধানের জন্য ধন্যবাদ।
ড্যারিল

আমি এটি চেষ্টা করেছি এবং যখন _ রুটস্কোপে প্রদর্শিত হচ্ছে, এনজি-রিপিট কিছুই রেন্ডার করে না।
পল

49

আমি আমার এইচটিএমএলকে খুব ন্যূনতম রাখতে চেয়েছিলাম, তাই একটি ছোট ফিল্টার সংজ্ঞায়িত করে যা অন্যের মতো এই অ্যারে [0,1,2, ...] তৈরি করে:

angular.module('awesomeApp')
  .filter('range', function(){
    return function(n) {
      var res = [];
      for (var i = 0; i < n; i++) {
        res.push(i);
      }
      return res;
    };
  });

এর পরে, ভিউটিতে এটি ব্যবহার করা সম্ভব:

<ul>
  <li ng-repeat="i in 5 | range">
    {{i+1}} <!-- the array will range from 0 to 4 -->
  </li>
</ul>

34

এটি সত্যই UGLY, তবে এটি কোনও পূর্ণসংখ্যা বা ভেরিয়েবলের জন্য নিয়ামক ছাড়াই কাজ করে:

পূর্ণসংখ্যা:

<span ng-repeat="_ in ((_ = []) && (_.length=33) && _) track by $index">{{$index}}</span>

পরিবর্তনশীল:

<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">{{$index}}</span>

সর্বকালের সেরা হ্যাক! ধন্যবাদ
জান্নাত

2
_ in (_ = []).length = 33; _ track by $indexকিছুটা ছোট
ফ্যাব্রিকিও

16

এটি করার অনেকগুলি উপায় রয়েছে। আমার কন্ট্রোলারে যুক্তিযুক্ত হওয়াতে আমি সত্যিই বিরক্ত হয়েছিলাম তাই আমি এন-বারে কোনও উপাদান পুনরাবৃত্তি করার সমস্যাটি সমাধান করার জন্য একটি সহজ নির্দেশিকা তৈরি করেছিলাম।

স্থাপন:

নির্দেশটি ব্যবহার করে ইনস্টল করা যেতে পারে bower install angular-repeat-n

উদাহরণ:

<span ng-repeat-n="4">{{$index}}</span

সৃষ্টি করে: 1234

এটি স্কোপ ভেরিয়েবল ব্যবহার করেও কাজ করে:

<span ng-repeat-n="repeatNum"></span>

সূত্র:

GitHub


1
এটি তাদের আনুষ্ঠানিক কৌণিক নির্দেশিকায় যোগ করার কথা বিবেচনা করা উচিত
হর্ষশসাদ

13

এটি গৃহীত উত্তরের উপর কেবলমাত্র সামান্য প্রকরণ, তবে আপনাকে নতুন কোনও ফাংশন তৈরি করার দরকার নেই । সুযোগে কেবল 'অ্যারে' আমদানি করতে:

<div ng-app="myapp">
    <div ng-controller="ctrlParent">
        <ul>
            <li ng-repeat="i in counter(5) track by $index">
              <span>{{$index+1}}</span></li>
        </ul>
    </div>
</div>
var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
    $scope.myNumber = 5;
    $scope.counter = Array;
});

একটি জীবন্ত উদাহরণের জন্য এই ঝাঁকুনি দেখুন ।


4
আপ টু ডেট (২০১)) এবং আরও ক্লিনার!
জুলিয়েন মালিগে

9

সহজ উত্তর: কোড 2 লাইন

জেএস (আপনার অ্যাংুলারজেএস কন্ট্রোলারে)

$scope.range = new Array(MAX_REPEATS); // set MAX_REPEATS to the most repetitions you will ever need in a single ng-repeat that makes use of this strategy

এইচটিএমএল

<div ng-repeat="i in range.slice(0,repeatCount) track by $index"></div>

... repeatCountএই অবস্থানটিতে প্রদর্শিত হওয়া পুনরাবৃত্তির সংখ্যা কোথায় ।


1
আমি বিশ্বাস করি যে এটি আপনাকে এইচটিএমএলটিতে পুনরাবৃত্তির সংখ্যা পরিবর্তন করতে দেয় না যদি এটি নিয়ামক হিসাবে পরিবর্তিত হয়, যদি না আপনি এটি অন্য উত্তরগুলির মতো কোনও ফাংশনে আবদ্ধ না করেন।
ট্রিপসিস

@ ট্রাইসিস: আমি আপনার সমস্যাটি বুঝতে পেরেছি কিনা তা নিশ্চিত নই, তবে আপনার repeatCountএইচটিএমএলতে একটি আসল সংখ্যাটি প্রতিস্থাপন করা উচিত এবং যতক্ষণ না এই সংখ্যাটি কম বা সমান-সংখ্যক হয় MAX_REPEATS, এটি আপনাকে নম্বরটি সেট করতে দেয় এইচটিএমএলে পুনরাবৃত্তি।
জেলিকেলিকেল

1
আমার মতে, এটি ngRepeatনির্দেশকে সীমাবদ্ধ করার সবচেয়ে মার্জিত উপায় । ব্যবহার Array.prototype.sliceএবং কথ্য জাতীয় উচিত সবসময় underscore.js মত একটি লাইব্রেরী (নির্ভর করে ব্রাউজার উপযুক্ততা) উপর মনোনীত করা হবে।
প্যাট মিগ্লিয়াসিও

কোনও খারাপ সমাধান নয়, +1, তবে আমি মনে করি এই উত্তরটি আরও সহজ এবং নিয়ামককে বিশৃঙ্খলা এড়ানো এড়ানো।
ম্যাক্সথ হাজার হাজার

8

কৌণিক স্লাইস নামে একটি খুব মিষ্টি ফাংশন দেয় .. এটি ব্যবহার করে আপনি যা সন্ধান করছেন তা অর্জন করতে পারেন। যেমন এনজি-রিপিট = "অ্যাব ইন.সি.স্লাইস (স্টার্ট ইন্ডেক্স, এন্ড ইন্ডেক্স)"

এই ডেমো: http://jsfiddle.net/sahigsheal/LurcV/39/ আপনাকে সাহায্য করবে এবং এই "জীবনকে সহজ করে" ফাংশনটি কীভাবে ব্যবহার করতে হয় তা আপনাকে জানাবে। :)

এইচটিএমএল:

<div class="div" ng-app >
    <div ng-controller="Main">
        <h2>sliced list(conditional NG-repeat)</h2>
        <ul ng-controller="ctrlParent">
            <li ng-repeat="ab in abc.slice(2,5)"><span>{{$index+1}} :: {{ab.name}} </span></li>
        </ul>
        <h2>unsliced list( no conditional NG-repeat)</h2>
         <ul ng-controller="ctrlParent">
            <li ng-repeat="ab in abc"><span>{{$index+1}} :: {{ab.name}} </span></li>
        </ul>

    </div>

সিএসএস:

ul
{
list-style: none;
}
.div{
    padding:25px;
}
li{
    background:#d4d4d4;
    color:#052349;
}

NG-জাতীয়:

 function ctrlParent ($scope) {
    $scope.abc = [
     { "name": "What we do", url: "/Home/AboutUs" },
     { "name": "Photo Gallery", url: "/home/gallery" },
     { "name": "What we work", url: "/Home/AboutUs" },
     { "name": "Photo play", url: "/home/gallery" },
     { "name": "Where", url: "/Home/AboutUs" },
     { "name": "playground", url: "/home/gallery" },
     { "name": "What we score", url: "/Home/AboutUs" },
     { "name": "awesome", url: "/home/gallery" },
     { "name": "oscar", url: "/Home/AboutUs" },
     { "name": "american hustle", url: "/home/gallery" }
    ];
}
function Main($scope){
    $scope.items = [{sort: 1, name: 'First'}, 
                    {sort: 2, name: 'Second'}, 
                    {sort: 3, name: 'Third'}, 
                    {sort: 4, name:'Last'}];
    }

6

কৌণিক 1.2.x এর একটি উত্তর এখানে

মূলত এটি একই, এর সামান্য পরিবর্তনের সাথে ng-repeat

<li ng-repeat="i in getNumber(myNumber) track by $index">

এখানে হৈচৈ করুন: http://jsfiddle.net/cHQLH/153/

এটি কারণ কারণ কৌণিক 1.2 নির্দেশিকায় নকল মানগুলিতে অনুমতি দেয় না। এর অর্থ যদি আপনি নিম্নলিখিতটি করার চেষ্টা করছেন তবে আপনি একটি ত্রুটি পাবেন।

<li ng-repeat="x in [1,1,1]"></li>

6

আপনি এর ng-ifসাথে নির্দেশিকাটি ব্যবহার করতে পারেনng-repeat

সুতরাং, সংখ্যাটি যদি আপনার বারের মতো উপাদানটির প্রয়োজন হয় তবে:

<li ng-repeat="item in list" ng-if="$index < num">

1
আপনারা যারা পরিষ্কার মার্কআপ পছন্দ করেন তাদের জন্য ... মনে রাখবেন ng-repeatএইভাবে ব্যবহার করার পরেও এটি মন্তব্য করা ট্যাগগুলি ( <!-- ngIf: $index < num -->ইত্যাদি) আউটপুট দেবে । liDOM রেন্ডার করার জন্য কেবল কোনও উপাদান থাকবে না । আমি কী বোঝাতে চাইছি ফলাফলের ফলকে এখানে একটি "উত্স উত্স" দেখুন।

3

আপনি এই উদাহরণ ব্যবহার করতে পারেন।

ভিতরে নিয়ামক:

$scope.data = {
    'myVal': 33,
    'maxVal': 55,
    'indexCount': function(count) {
        var cnt = 10;
        if (typeof count === 'number') {
            cnt = count;
        }
        return new Array(cnt);
    }
};

এইচটিএমএল কোড সাইডে নির্বাচিত উপাদানগুলির উদাহরণ:

<select ng-model="data.myVal" value="{{ data.myVal }}">
    <option ng-repeat="i in data.indexCount(data.maxVal) track by $index" value="{{ $index + 1 }}">{{ $index + 1 }}</option>
</select>

3

কফিস্ক্রিপ্ট ব্যবহারকারীদের জন্য, আপনি একটি পরিসীমা বোঝাপড়া ব্যবহার করতে পারেন:

নির্দেশিকা

link: (scope, element, attrs) ->
  scope.range = [1..+attrs.range]

বা নিয়ামক

$scope.range = [1..+$someVariable]
$scope.range = [1..5] # Or just an integer

টেমপ্লেট

<div ng-repeat="i in range">[ the rest of your code ]</div>

3

ইভানের প্রথম উত্তরের উপর কিছুটা প্রসারিত করে আপনি স্ট্রাকশনটি স্ট্রাকশন হিসাবে ট্র্যাক ছাড়াই স্ট্র্যাক্ট ব্যবহার করতে পারবেন যতক্ষণ না অক্ষরগুলি অনন্য, তাই যদি ব্যবহার-কেস 10 সংখ্যার চেয়ে কম হয় তবে আমি যা করবো সে প্রশ্নটি কেবল :

<ul>
   <li ng-repeat="n in '12345'"><span>{{n}}</span></li>
</ul>

যা কিছুটা ঝাঁকুনির মতো, নিশ্চিত, তবে দেখার মতো যথেষ্ট সহজ এবং বিভ্রান্তিকর নয়।


2

প্রথমে লোড্যাশ ব্যবহার করে একটি কৌণিক ফিল্টার তৈরি করুন:

angular.module('myApp').filter('times', function(){
   return function(value){
      return _.times(value || 0);
   }
});

লোড্যাশ টাইম ফাংশন নাল, অপরিজ্ঞাত, 0, সংখ্যা এবং সংখ্যার স্ট্রিং প্রতিনিধিত্ব পরিচালনা করতে সক্ষম।

তারপরে, এটি আপনার HTML তে এটি ব্যবহার করুন:

<span ng-repeat="i in 5 | times">
 <!--DO STUFF-->
</span>

অথবা

<span ng-repeat="i in myVar | times">
 <!--DO STUFF-->
</span>

1

আমার এটির জন্য আরও গতিশীল সমাধানের প্রয়োজন ছিল - যেখানে আমি পুনরাবৃত্তিটি বাড়িয়ে তুলতে পারি।

এইচটিএমএল

<div ng-repeat="n in newUserCount">
<input type="text" value="" name="newuser{{n}}"/>
</div>

সদৃশ নিয়ন্ত্রণ

<span class="helper" ng-click="duplicateUser()">
Create another user with the same permissions
</span>

জাতীয়

 $scope.newUserCount = Array('1');
var primaryValue = 1;
$scope.duplicateUser = function()
{
    primaryValue++;
    $scope.newUserCount.push(primaryValue)
}

1

কৌনিক একটি সংগ্রহকে সংশোধন করতে ফিল্টার সরবরাহ করে। এক্ষেত্রে সংগ্রহটি বাতিল হবে, অর্থাত্ [], এবং ফিল্টারটিও যুক্তিগুলি গ্রহণ করে, নিম্নরূপ:

<div id="demo">
    <ul>
        <li ng-repeat="not in []|fixedNumber:number track by $index">{{$index}}</li>
    </ul>
</div>

জাতীয়:

module.filter('fixedNumber', function() {
    return function(emptyarray, number) {
        return Array(number);
    }
});

module.controller('myCtrl', ['$scope', function($scope) {
    $scope.number = 5;
}]);

এই পদ্ধতিটি উপরে প্রস্তাবিতগুলির সাথে অত্যন্ত অনুরূপ এবং অগত্যা উচ্চতর নয় তবে অ্যাঙ্গুলারজেএস-এ ফিল্টারগুলির শক্তি দেখায়।


1

যদি এন খুব বেশি না হয়, তবে অন্য একটি বিকল্প হ'ল n অক্ষরের স্ট্রিং সহ স্প্লিট ('') ব্যবহার করা যেতে পারে:

<div ng-controller="MainCtrl">
<div ng-repeat="a in 'abcdefgh'.split('')">{{$index}}</div>
</div>

আমি বিশ্বাস করি এখানে বিভক্তি অপ্রয়োজনীয়। একটি স্ট্রিং ইতিমধ্যে অক্ষরের অ্যারে।
omikes

1

আমি একই সমস্যার মুখোমুখি হয়েছি এবং এটিই আমি এনেছি:

(function () {
  angular
    .module('app')
    .directive('repeatTimes', repeatTimes);

  function repeatTimes ($window, $compile) {
    return { link: link };

    function link (scope, element, attrs) {
      var times    = scope.$eval(attrs.repeatTimes),
          template = element.clone().removeAttr('repeat-times');

      $window._(times).times(function (i) {
        var _scope = angular.extend(scope.$new(), { '$index': i });
        var html = $compile(template.clone())(_scope);

        html.insertBefore(element);
      });

      element.remove();
    }
  }
})();

... এবং এইচটিএমএল:

<div repeat-times="4">{{ $index }}</div>

উদাহরণ লাইভ

আমি আন্ডারস্কোরের timesফাংশনটি ব্যবহার করেছি যেখানে আমরা ইতিমধ্যে প্রকল্পে এটি ব্যবহার করছি তবে আপনি সহজেই এটি স্থানীয় কোড সহ প্রতিস্থাপন করতে পারেন।


0

আমি একটি পুনরায় ব্যবহারযোগ্য নির্দেশিকা তৈরি করছি যেখানে সর্বাধিক নম্বরটি অন্য এনজি-রিপিট থেকে আসবে। সুতরাং, এটি সেরা ভোট দেওয়া উত্তরের একটি সম্পাদনা।

কন্ট্রোলারে কোডটি কেবল এতে পরিবর্তন করুন -

$scope.getNumber = function(num) {
    var temp = [];
    for(var j = 0; j < num; j++){
        temp.push(j)
    }
    return temp; 
}

এটি নির্দিষ্ট সংখ্যার পুনরাবৃত্তির সাথে একটি নতুন অ্যারে প্রদান করবে


0

যেহেতু একটি স্ট্রিং দিয়ে পুনরাবৃত্তি এটি প্রতিটি চরের জন্য একটি আইটেম সরবরাহ করবে:

<li ng-repeat = "k in 'aaaa' track by $index">
   {{$index}} //THIS DOESN'T ANSWER OP'S QUESTION. Read below.
</li>

আমরা নেটিভ ফিল্টার ব্যবহার করে এই কুৎসিত কিন্তু নো-কোড ওয়ার্কআউন্ড ব্যবহার করতে পারি number|n decimal places

 <li ng-repeat="k in (0|number:mynumber -2 ) track by $index">
    {{$index}}
 </li>

এইভাবে আমাদের হবে mynumber কোনও অতিরিক্ত কোডবিহীন উপাদান । বলুন '0.000'
আমরা mynumber - 2ক্ষতিপূরণ দিতে ব্যবহার করি 0.
এটি 3 টির নীচের সংখ্যার জন্য কাজ করবে না, তবে এটি কিছু ক্ষেত্রে কার্যকর হতে পারে।


আপনি ব্যবহার করেছেন track by $index?
ইভান ফেরের ভিলা

এটি ঘেঁটো আফা। আপনি প্রতিটি পুনরাবৃত্তির জন্য একটি গৃহস্থালির কাজ ভাল হিসাবে আপনি কি হতে পারে আছে বাধ্য করা যাচ্ছে করছিng-repeat="i in [1,2,3,4]"
রই

অবশ্যই, তবে ওপি চাইছে একটি চলকের উপর ভিত্তি করে পুনরাবৃত্তিটি n বার হবে$scope.number
ইভান ফেরার ভিলা

কেন আপনি 'আআআ' এর পরিবর্তে 'এবিডিডি' না করে ট্র্যাকটি স্ক্র্যাপ করে রেখেছেন?
omikes

aaaaআমার-খুব মার্জিত-ওয়ার্কআরউন্ড ব্যাখ্যা করার জন্য এটি একটি উদাহরণ ছিল। হার্ডকোডযুক্ত 'আআআ' বা 'অ্যাবিসিডি' ব্যবহার করে আপনি একটি নির্দিষ্ট দৈর্ঘ্যের তালিকা পান তবে mynumber-2দশমিক দশকে যুক্ত করে আপনি mynumberঅক্ষরের সাথে একটি স্ট্রিং পাবেন get বলুন mynumber=5, আপনি পান '0.000', তবে আমরা পুনরাবৃত্তি করব যে $ সূচক ব্যবহার করে
ইভান ফেরার ভিলা

0
$scope.number = 5;

<div ng-repeat="n in [] | range:$scope.number">
      <span>{{$index}}</span>
</div>

-1

সহজ উপায়:

    public defaultCompetences: Array<number> = [1, 2, 3];

উপাদান / নিয়ামক এবং তারপরে:

    <div ng-repeat="i in $ctrl.defaultCompetences track by $index">

এই কোডটি আমার টাইপ স্ক্রিপ্ট প্রকল্প থেকে তবে খাঁটি জাভাস্ক্রিপ্টে পুনরায় সাজানো যেতে পারে

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.