Angular повторить <span> n раз

Ответ 1

Я бы использовал специальный фильтр с ng-repeat:

HTML

<div ng-app='myApp' ng-controller="Main">
    <li ng-repeat="n in [] | range:20">
      <span class="glyphicon glyphicon-star" >{{n}}</span>
    </li>
</div>

фильтр

app.filter('range', function() {
  return function(val, range) {
    range = parseInt(range);
    for (var i=0; i<range; i++)
      val.push(i);
    return val;
  };
});

Демо Fiddle

Ответ 2

Самый короткий ответ: 2 строки кода

JS (в вашем контроллере AngularJS)

$scope.range = new Array(MAX_STARS); // MAX_STARS should be the most stars you will ever need in a single ng-repeat

HTML

<span class="glyphicon glyphicon-star" ng-repeat="i in range.slice(0,starCount) track by $index"/>

... где starCount - количество звезд, которое должно появиться в этом месте.

Ответ 3

вы можете написать диапазон фильтров:

'use strict';

angular.module('app.Filter')
.filter('range', function() {
    return function(input, total) {
        total = parseInt(total);
        for (var i=0; i < total; ++i) {
            input.push(i);
        }
        return input;
    };
});

затем используйте его

<span class="glyphicon glyphicon-star" ng-repeat="i in [] | range:5"/>

5 его x

Ответ 4

Когда я впервые начал играть с AngularJS, я нашел приличный учебник, в котором вы можете создать пользовательскую директиву для создания виджета "Рейтинг" в Angularjs.

http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/

Они не делают ничего особенного, кроме создания коллекции пустых объектов, основанной на значении переменной двухсторонней границы области видимости, определенной в директиве.

directive('fundooRating', function () {
    return {
        restrict: 'A',
        template: '<ul class="rating">' +
                      '<li ng-repeat="star in stars" class="filled">' +
                          '\u2605' +
                      '</li>' +
                  '</ul>',
        scope: {
            ratingValue: '='
        },
        link: function (scope, elem, attrs) {
            scope.stars = [];
            for (var i = 0; i < scope.ratingValue; i++) {
                scope.stars.push({});
            }
        }
    }
});

Приятно, что коллективная беспорядок, по крайней мере, инкапсулирована внутри директивы, и все, что нужно контроллеру, - это иметь дело с числовым значением рейтинга. Учебное пособие также проведет вас через двухстороннюю связь между директивой и контроллером по переменной области значений рейтинга.

IMHO, это самое чистое решение, поскольку AngularJS напрямую не поддерживает то, что вы хотите сделать. По крайней мере, здесь легко понять, что вы пытаетесь сделать в своем контроллере и просматривать (где вы хотите избежать ненужной сложности), и вы перемещаете хакерство в директиву (которую вы, вероятно, напишете один раз и забудете).

Ответ 5

Angular (V1.2.9 и выше) включает фильтр limitTo:n, который будет делать это из коробки. Например, чтобы ограничить ng-repeat до первых 20 элементов, используйте следующий синтаксис:

<div ng-app='myApp' ng-controller="Main">
    <li ng-repeat="n in [] | limitTo:20">
      <span class="glyphicon glyphicon-star" >{{n}}</span>
    </li>
</div>

Документация для limitTo здесь

Чтобы быть справедливым, фильтр limitTo не существовал в момент запроса исходного вопроса.

Ответ 6

Я ответил на аналогичный (дублированный?) вопрос fooobar.com/info/18612/.... Я просто перепечатаю здесь, поскольку я тоже оказался здесь, чтобы найти ответ.

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

LIVE EXAMPLE