角度重复 <span> n 次

Posted 2023-03-05

【中文标题】角度重复 <span> n 次

【英文标题】：Angular repeat <span> n times

【发布时间】：2013-12-28 16:07:24

【问题描述】：

我有一个 JSON 对象，其中包含一个 int 属性 x，我想重复以下代码 x 次

<span class="glyphicon glyphicon-star"/>

似乎未指示 ng-repeat，因为它正在处理集合。 任何建议（角度新手）

【问题讨论】：

***.com/questions/16824853/…

您遇到了ng-repeat 不太符合要求的极端情况之一；你想要那种ng-replicate="n" 但在角度绑定中不存在的东西（还）。因此，您可以选择在控制器中声明 Array(n) 然后循环它或自己创建 ng-replicate。

Iteration ng-repeat only X times in AngularJs的可能重复

【参考方案1】：

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 的文档是 here

公平地说，limitTo 过滤器在提出原始问题时并不存在。

【讨论】：

无法完成这项工作（angularjs 1.5.9），我找到的最佳替代方案是***.com/a/14198102/1085483。我的猜测是这不起作用，因为limitTo返回一个长度为20的空数组，但ng-repeat不会在不使用'track by $index'的情况下迭代空数组。

【参考方案2】：

我回答了一个类似的（重复的？）问题https://***.com/a/31864879/1740079。我将在这里重新发布，因为我也最终在这里寻找答案。

(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

【参考方案3】：

最短答案：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 是该位置应出现的星数。

【参考方案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();
            
        
    
);

好消息是集合的混乱至少被封装在指令内部，所有控制器所要做的就是处理数字评级值。本教程还引导您完成指令和控制器之间评级值范围变量的两种方式链接。

恕我直言，这是最干净的解决方案，因为 AngularJS 不直接支持您想要做的事情。至少在这里，很容易理解您在控制器和视图中尝试执行的操作（这是您想要避免不必要的复杂性的地方），并且您将 hackish-ness 移到指令中（您可能会编写一次并忘记)。

【参考方案5】：

我会使用带有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

【参考方案6】：

你可以写过滤范围：

'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