Шлях да НГ-паўтарыць пэўную колькасць раз, замест таго каб паўтараць праз масіў?

Is there a way to ng-repeat a defined number of times instead of always having to iterate over an array?

For example, below I want the list item to show up 5 times assuming $scope.number equal to 5 in addition incrementing the number so each list item increments like 1, 2, 3, 4, 5

Desired result:

  • 1
  • 2
  • 3
  • 4
  • 5


385
дададзена аўтар Ken, крыніца
дададзена аўтар T J, крыніца

25 адказы

На дадзены момант НГ-паўтор прымае толькі калекцыю ў якасці параметру, але вы можаце зрабіць гэта:

  • {{$index+1}}

І недзе ў кантролеры:

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

Гэта дазволіць вам змяніць $ scope.number для любога ліку, як заўгодна і па-ранейшаму падтрымліваць прывязку вы шукаеце.

Here is a fiddle with a couple of lists using the same getNumber function.

EDIT 1/6/2014: Newer versions of Angular make use of the following syntax:

517
дададзена
@ Sh0ber гэтае рашэнне прывядзе да памылкі з апошняй версіяй ANGULAR ст. Я выкарыстоўваю 1.4.8 і гэта прыводзіць Чаканы масіў, але атрымаў: 0 Just A галавы
дададзена аўтар Batman, крыніца
@Manavendher Я сутыкнуўся з такой жа праблемай. Мне трэба пересборка НГ-паўтор, заснаваны на значэнні уваходнага поля. Ці лічыце вы якія-небудзь рашэнні?
дададзена аўтар kushalvm, крыніца
@Manavendher Я паспрабаваў з кутняй 1.2.x і 1.5.x з тымі ж вынікамі. Спасылкі з'яўляюцца: 1. stackoverflow.com/questions/40202263/… 2. plnkr.co/ рэдагаваць/zcPr7oUEBBWvCSVkDvml
дададзена аўтар kushalvm, крыніца
Я атрымліваю гэтую памылку RangeError: недапушчальным даўжыня масіва
дададзена аўтар Usman Iqbal, крыніца
не працуе me..returning пусты масіў
дададзена аўтар Rahul Sharma, крыніца
@ Sh0ber вы захавалі свой дзень з рэдагаваннем!
дададзена аўтар Mardok, крыніца
@Batman Гэта працуе добра для мяне, калі я рэгулюю дэма даў у адказ выкарыстоўваць v1.4.8 ...
дададзена аўтар sh0ber, крыніца
@Manavendher Няправільна. Нам не трэба, каб запоўніць масіў, нам трэба толькі, каб быць даўжыня $ scope.number . Кутняя Дайджэст цыкл аўтаматычна ўспомніць гэтую функцыю і змяніць памер масіва ў любы час $ scope.number змены.
дададзена аўтар sh0ber, крыніца
Ён павінен працаваць для любога колькасці спісаў. Праверце гэтую скрыпку
дададзена аўтар sh0ber, крыніца
калі ён застаецца ў масіве прыемна выкарыстаць «| limitTo :. 5» фільтр
дададзена аўтар Nikita Chernykh, крыніца
@ Sh0ber. Калі мне трэба змяніць складнікі спісаў на аснове значэння, абранага ў расчыняецца спісе нумар. Я паспрабаваў вашу функцыю першай, калі ён не працуе, я змяніў яго вышэй, каб абнавіць няма. з элементаў спісу, калі розны лік абрана ў выпадальным спісе. Ці можаце вы праверыць мой сцэнар з дапамогай функцыі.
дададзена аўтар Manavendher, крыніца
$ Scope.getNumber = функцыя (лік) {вар х = новы Array (); для (вар я = 0; я <�лік; я ++) {x.push (г + 1); } Вяртаць х; }//выкарыстоўваць гэтую функцыю, калі лік змяненняў дынамічна
дададзена аўтар Manavendher, крыніца
Я выкарыстоўваю гэта для некалькіх элементаў спісу, але гэта толькі здаецца, працаваць у першы спіс. Вы ведаеце, чаму гэта так?
дададзена аўтар Malcr001, крыніца
Дзякуй зноў. Я забыўся выдаліць НГ-паўтору на бацькоўскі элемент. Цяпер яна працуе. Дзякуючы.
дададзена аўтар Malcr001, крыніца
Разгледзім гэты адказ , каб пазбегнуць неабходнасці стварэння функцыі кантролера.
дададзена аўтар maxathousand, крыніца

Вы можаце зрабіць гэта:

<div ng-repeat="i in [1, 2, 3, 4]">
  ...
</div>
126
дададзена
працаваў як шарм, выпрабаванага на Chrome арт. 39.0.2171.95 (64-бітны), ФФ v. 33.1.1 і Сафары v. 8.0.2
дададзена аўтар Neara, крыніца
Ах, гэта працавала б так добра, калі JS меў дыяпазоны спісу.
дададзена аўтар Aditya M P, крыніца
@AdityaMP, выкарыстаць гэта для дыяпазонаў у JavaScript stackoverflow.com/a/31989462/3160597
дададзена аўтар azerafati, крыніца
Гэта выдатна працуе, калі вы выкарыстоўваеце яго ў элеменце кіравання пастаронкавага, дзе ўсё, што вам трэба гэта
  • {{я}}
  • дададзена аўтар Rick, крыніца
    Разгледзім выклік канструктара масіва для масіва дынамічнай даўжыні, як паказана ў гэты адказ .
    дададзена аўтар maxathousand, крыніца

    Here is an example of how you could do this. Note that I was inspired by a comment in the ng-repeat docs: 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);
        };
    };
    
    90
    дададзена
    Вы можаце таксама выкарыстоўваць _ дыяпазон з Underscore або lodash для стварэння масіва :. $ Scope.range = _.range (0, п);
    дададзена аўтар Devon Muraoka, крыніца

    Я думаю, што гэта jsFiddle ад гэтага нітка можа быць тое, што вы шукаеце.

    <div ng-app ng-controller="Main">
       <div ng-repeat="item in items | limitTo:2">
           {{item.name}}
       </div>
    </div>
    
    79
    дададзена
    @Cody @ sh0ber вы можаце ўсталяваць мяжа ў Вашай вобласці ( $ scope.limit = 2 ) і выкарыстаць яго як ... | limitTo: мяжа - гл <�а HREF = "http://jsfiddle.net/drzaus/Nu7rZ/154/" отн = "NOFOLLOW noreferrer"> абноўлены скрыпку
    дададзена аўтар drzaus, крыніца
    У мяне было патрабаванне, каб абмежаваць спіс першых трох пунктаў, то ёсць мадальнасць, калі карыстальнік хоча ўвесь спіс. Выкарыстоўваючы гэты прыклад, які я атрымаў яго працу. Дзякуй!
    дададзена аўтар James Drinkard, крыніца
    Гэта павінна быць прынята адказваць (на мой погляд) - Самы элегантны, самы НГ-аддае перавагу.
    дададзена аўтар Cody, крыніца
    @Cody На жаль, не, гэта не дае адказу на пытанне. OP заяўляе, што «замест таго, каб заўсёды мець перабраць масіў» і «пры ўмове, $ scope.number роўна 5». Намер складалася ў тым, каб выкарыстоўваць цэлалікавых зменную, каб вызначыць колькасць элементаў, не цвёрда яго і не выкарыстоўваць наканаваны масіў.
    дададзена аўтар sh0ber, крыніца
    Адказ на гэтае пытанне можа прывесці да самым мінімальным след у кантролерах, і я лічу, з'яўляецца пераважнай Кутні падыход, а таксама. ИМО прыняў адказ павінен быць заменены на гэта.
    дададзена аўтар Matt Jensen, крыніца
    чытаць далей ўніз па разьбе спасылцы Google і апісвае, як вы можаце выкарыстоўваць «кавалак». напрыклад группа1: items.slice (0,3), group2: items.slice (3,6), і г.д.
    дададзена аўтар trevorc, крыніца

    Я сутыкнуўся з той жа праблемай. Я наткнуўся на гэтую тэму, але не падабаюцца метады, якія яны мелі тут. Маё рашэнне выкарыстоўвае underscore.js, які мы ўжо былі ўсталяваныя. Гэта так проста, як гэта:

    • {{n}}
    
    

    Гэта будзе рабіць менавіта тое, што вы шукаеце.

    49
    дададзена
    Я паспрабаваў гэта, і ў той час як _ паказвае ў $ rootScope, то НГ-паўтор нічога не робіць.
    дададзена аўтар Paul, крыніца
    Гэта добра, але звернеце ўвагу, што Падкрэсліванне не ў вобласці бачнасці па змаўчанні - вы не зможаце выкарыстоўваць яго з вашага пункту гледжання HTML, не робячы нешта накшталт $ scope._ = _ .
    дададзена аўтар jedd.ahyoung, крыніца
    Калі вы выкарыстоўваеце lodash або падкрэслення, вы павінны змясціць яго ў $ rootScope , таму ён можа быць выкарыстаны ўсюды. Змесціце гэта ў app.run функцыя адразу пасля app.config : app.run (функцыя ($ rootScope) {$ rootScope._ = _;} );
    дададзена аўтар Jeremy - DeerAngel-org, крыніца
    Гэта быў ідэальны адказ для мяне. Гэта проста і вельмі проста. Бо я паўтараў, выкарыстоўваючы зменную, якая мела падлік, я павінен быў зрабіць НГ-паўтор = "п у _.range (1, граф + 1). Дзякуючы для рашэння.
    дададзена аўтар Darryl, крыніца

    Я хацеў, каб мой HTML вельмі мінімальныя, так вызначыў невялікі фільтр, які стварае масіў [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;
        };
      });
    

    Пасля гэтага, на думку можна выкарыстоўваць наступным чынам:

    • {{i+1}} <!-- the array will range from 0 to 4 -->
    
    
    
    46
    дададзена
    гэта павінна быць прынятым адказ имо
    дададзена аўтар r3wt, крыніца

    Больш просты падыход быў бы (для прыкладу 5 разоў):

    <div ng-repeat="x in [].constructor(5) track by $index">
           ...
    </div>
    
    38
    дададзена
    Я люблю гэты шлях.
    дададзена аўтар Rabbi Shuki Gur, крыніца
    Brilliant. Чытаныя, кароткія і не дурныя функцыі ў кантролеры, каб вярнуць новы масіў.
    дададзена аўтар maxathousand, крыніца

    Гэта сапраўды непрыгожа, але працуе без кантролера для любога цэлага ліку або зменнай:

    цэлы лік:

    {{$index}}
    

    пераменная:

    {{$index}}
    
    33
    дададзена
    . <�Код> _ ў (_ = []) даўжыня = 33; _ Трэк ад $ індэкса крыху менш
    дададзена аўтар Fabricio, крыніца
    Лепшы хак калі-небудзь! дзякуй
    дададзена аўтар jannis, крыніца
    Гэта выдатна падыходзіць для прототипирования, дзякуй!
    дададзена аўтар Alex Szabó, крыніца

    Ёсць шмат спосабаў зрабіць гэта. Я сапраўды папрацавалі на маючы логіку ў маім кантролеры, так што я стварыў простую дырэктыву, каб вырашыць праблему паўтарэння такога элемента п раз.

    <�Моцны> Усталёўка:

    The directive can be installed using bower install angular-repeat-n

    <�Моцны> Прыклад: </моцны>

    {{$index}}

    produces: 1234

    Ён таксама працуе з выкарыстаннем зменнай вобласці дзеяння:

    
    

    <�Моцны> Крыніца:

    Github

    16
    дададзена
    Гэта тое, што яны павінны разгледзець пытанне аб даданні афіцыйных кутніх дырэктыў
    дададзена аўтар HarshaXsoad, крыніца

    Гэта толькі невялікая варыяцыя на прыняты адказ, але вы сапраўды не трэба, каб стварыць новы функцыі. Толькі для імпарту «Масіў» ў аб'ёме:

    <div ng-app="myapp">
        <div ng-controller="ctrlParent">
            
    • {{$index+1}}
        </div>
    </div>
    
    var app = angular.module('myapp',[]);
    app.controller('ctrlParent',function($scope){
        $scope.myNumber = 5;
        $scope.counter = Array;
    });
    

    См гэтую скрыпку для жывога прыкладу.

    13
    дададзена
    да цяперашняга часу (2016) і нашмат чысцей!
    дададзена аўтар Julien Malige, крыніца

    Самы просты адказ: 2 радкі кода

    <�Моцны> JS (ў кантролеры AngularJS)

    $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
    

    <�Моцны> HTML

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

    ... дзе RepeatCount гэты лік паўтораў, якія павінны з'явіцца ў гэтым месцы.

    9
    дададзена
    @trysis: Я не ўпэўнены, калі я разумею ваша пытанне, але вы павінны замяніць RepeatCount з фактычным лікам у HTML, і да таго часу, як гэта лік менш чым або роўна да MAX_REPEATS , гэта дазволіць вам усталяваць колькасць паўтораў у HTML.
    дададзена аўтар JellicleCat, крыніца
    Я лічу, што гэта не дазволіць вам змяніць колькасць паўтораў у HTML, калі яна змяняецца ў кантролеры, калі вы не абгарнуць яго ў функцыі, як і іншыя адказы зрабілі.
    дададзена аўтар trysis, крыніца
    На мой погляд, гэта самы элегантны спосаб абмежавання ngRepeat дырэктывы. Выкарыстанне Array.prototype.slice і ідыёматычны JS павінен <�б> заўсёды можна выбраць па бібліятэцы, як underscore.js (сумяшчальнасць браўзэра ў залежнасці).
    дададзена аўтар Pat Migliaccio, крыніца
    Добрае рашэнне, +1, але я думаю гэты адказ прасцей, і дазваляе пазбегнуць загрувашчвання кантролера.
    дададзена аўтар maxathousand, крыніца

    angular gives a very sweet function called slice.. using this you can achieve what you are looking for. e.g. ng-repeat="ab in abc.slice(startIndex,endIndex)"

    гэта дэма: http://jsfiddle.net/sahilosheal/LurcV/39/ дапаможа і скажыце, як выкарыстоўваць гэтую "лёгкую робіць жыццё» функцыю. :)

    HTML:

    <div class="div" ng-app >
        <div ng-controller="Main">
            

    sliced list(conditional NG-repeat)

            
    • {{$index+1}} :: {{ab.name}}
            

    unsliced list( no conditional NG-repeat)

             
    • {{$index+1}} :: {{ab.name}}
        </div>
    

    CSS:

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

    ng-JS:

     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'}];
        }
    
    8
    дададзена

    Heres адказ на кутні 1.2.x

    У асноўным гэта тое ж самае, з невялікай мадыфікацыяй элемента НГ паўторамі

  • here is the fiddle: http://jsfiddle.net/cHQLH/153/

    гэта таму, што кутняя 1,2 не дапушчае паўтаральных значэнняў у дырэктыве. Гэта азначае, што калі вы спрабуеце зрабіць наступнае, вы атрымаеце паведамленне пра памылку.

  • 6
    дададзена

    You can use the ng-if directive with ng-repeat

    Такім чынам, калі Num гэтага колькасць раз, вам неабходны элемент паўтараецца:

    6
    дададзена
    Для тых з вас, хто любіць чыстую разметку ... Майце ў выглядзе, выкарыстоўваючы НГ-паўтор у гэтым выпадку ўсё роўна будзе выводзіць яго каментавалі тэгі ( <- ngIf: $ індэксаў <�лік - > і г.д ..). Там проста не будзе LI элементы для DOM для рэндэрынгу. Праверыць «прагледзець зыходны код» на вынікі панэлі тут , каб убачыць, што я маю на ўвазе.
    дададзена аўтар ZaLiTHkA, крыніца

    Па-першае, стварыць кутні фільтр з выкарыстаннем LoDash:

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

    Раз функцыя LoDash здольная апрацоўваць нуль, нявызначанага, 0, колькасці і радок прадстаўлення лікаў.

    Затым, выкарыстоўвайце яго ў HTML, як гэта:

    
     <!--DO STUFF-->
    
    

    або

    
     <!--DO STUFF-->
    
    
    3
    дададзена

    Для карыстальнікаў з дапамогай CoffeeScript, вы можаце выкарыстоўваць дыяпазон разумення:

    Directive

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

    or Controller

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

    Template

    <div ng-repeat="i in range">[ the rest of your code ]</div>
    
    3
    дададзена

    Вы можаце выкарыстоўваць гэты прыклад.

    Ўнутры кантролера:

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

    Прыклад для выбару элемента на баку HTML-кода:

    
    
    2
    дададзена

    Пашырэнне трохі на першым адказ Івана трохі, вы можаце выкарыстоўваць радок у якасці калекцыі без следу заявы, пакуль персанажы ўнікальныя, таму, калі выкарыстанне выпадак менш, чым 10 чысла, як гэта пытанне, які я б проста зрабіць :

    • {{n}}
    
    

    Што крыху jenky, вядома, але досыць проста паглядзець і ня асабліва збівае з толку.

    1
    дададзена

    Калі п не надта вялікі, і іншы варыянт можа быць выкарыстоўваць раскол ( «») са радком з п знакаў:

    <div ng-controller="MainCtrl">
    <div ng-repeat="a in 'abcdefgh'.split('')">{{$index}}</div>
    </div>
    
    1
    дададзена
    я лічу, што раскол не патрэбны тут. радок ўжо масіў знакаў.
    дададзена аўтар oMiKeY, крыніца

    просты спосаб:

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

    у кампаненце/кантролера, а затым:

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

    This code is from my typescript project but could be rearranged to pure javascript

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

    ... і HTML:

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

    жывы прыклад

    Я выкарыстаў ніжняе падкрэсліванне ў раз функцыі, як мы дзе ўжо выкарысталі яго на праекце, але вы можаце лёгка замяніць, што з машынным кодам.

    0
    дададзена

    так як ітэрацыя радок будзе аказваць элемент для кожнага паўкокс:

  • {{$index}} //THIS DOESN'T ANSWER OP'S QUESTION. Read below.
  •  
    

    мы можам выкарыстоўваць гэты <�моцны> выродлівую , але няма-кода абыходны шлях, выкарыстоўваючы лік | N знакаў пасля коскі роднай фільтр.

     
  • {{$index}}
  •  
    

    такім чынам, мы будзем мець MyNumber элементы без якога-небудзь дадатковага кода. Скажам '0.000' .
    Мы выкарыстоўваем MyNumber - 2 , каб кампенсаваць 0
    . Ён не будзе працаваць для лікаў ніжэй 3, але можа быць карысна ў некаторых выпадках.

    0
    дададзена
    Не працуе. Атрыманне [ngRepeat: падманвае].
    дададзена аўтар Alex Weinstein, крыніца
    чаму не «ABCD» замест «AAAA», а затым лом дарожкі на?
    дададзена аўтар oMiKeY, крыніца
    <�Код> аааа быў прыкладам, каб патлумачыць маю -Ну вельмі elegant- абыходны шлях. Выкарыстанне жорстка прапісаныя «AAAA» або «ABCD» вы атрымаеце спіс фіксаванай даўжыні, але даданне MyNumber-2 дзесятковыя да 0, вы атрымаеце «радок» з MyNumber Гольца. Скажам MyNumber = 5 , вы атрымаеце '0,000' , то перабіраць, што з дапамогай $ індэкс
    дададзена аўтар Ivan Ferrer Villa, крыніца
    вядома, але ОП хоча ітэрацыю быць у п раз, заснаваныя на зменнай $ scope.number
    дададзена аўтар Ivan Ferrer Villa, крыніца
    вы выкарыстоўвалі след $ індэксам ?
    дададзена аўтар Ivan Ferrer Villa, крыніца
    гэта гета аф. калі вы збіраецеся быць вымушаны мець сімвал для кожнай ітэрацыі вы можаце таксама зрабіць НГ паўтору = "я ў [1,2,3,4]»
    дададзена аўтар Roi, крыніца

    Я меў патрэбу ў больш дынамічнае вырашэнні гэтай праблемы - дзе я мог бы павялічваю паўтарыць.

    HTML

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

    Дубликатор кіравання

    
    Create another user with the same permissions
    
    

    JS

     $scope.newUserCount = Array('1');
    var primaryValue = 1;
    $scope.duplicateUser = function()
    {
        primaryValue++;
        $scope.newUserCount.push(primaryValue)
    }
    
    0
    дададзена

    Вуглавыя забяспечваюць фільтры для змены калекцыі. У гэтым выпадку калекцыя будзе пустой, то ёсць [], а фільтр таксама прымае аргументы, наступным чынам:

    <div id="demo">
        
    • {{$index}}
    </div>
    

    JS:

    module.filter('fixedNumber', function() {
        return function(emptyarray, number) {
            return Array(number);
        }
    });
    
    module.controller('myCtrl', ['$scope', function($scope) {
        $scope.number = 5;
    }]);
    

    Гэты метад вельмі падобны на тыя, прапанаваных вышэй, і не абавязкова вышэй, але паказвае сілу фільтраў у AngularJS.

    0
    дададзена

    Я ствараю шматразовую дырэктыву, дзе максімальны лік будзе паступаць з іншых НГ-паўтору. Такім чынам, гэта рэдагаваць па лепшым галасаваў адказ.

    Проста зменіце код на кантролер да гэтага -

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

    Гэта вяртае новы масіў з зададзеным лікам ітэрацый

    0
    дададзена