0

Есть переменная. В ней число от 0 до 5. Необходимо вывести <div class="mark"></div> указанное количество раз. Как это реализовать в angularjs? Моя лучшая идея(псевдокод):

В контроллере:

$scope.number = 4;
$scope.out ={};
for(var i = 0; i<$scope.number; i++)
{
   $scope.out = $scope.out + '<div class='mark'></div>';
}

В шаблоне:

<span ng-repeat-start="item in $scope.out">
  {{ item }}
</span>

Но есть ощущение какой-то, ну знаете, дичи от того как это выглядит. Как это должно быть в более разумном варианте?

P.S.: суть задачи выводить количество звездочек в профиле пользователя.

еще одна мысль:

<div ng-controller="myAppConroller as controller">
    <div ng-repeat="item in controller.items | limitTo:$scope.number">
        <span>{{item}}</span>
    </div>
</div>

items должен содержать 5 <div> ( максимально возможное количество по условию задачи). Выглядит уже лучше, но я еще не доволен.

4
  • 1
    что за звездочки? и где они хранятся? чем не устраивает код с limitTo?
    – Grundy
    19 авг 2016 в 7:41
  • в базе данных хранится число. Я его получаю в $rootScope. limitTo звучит неплохо, но может быть есть что-то лучше?
    – J. Doe
    19 авг 2016 в 7:43
  • 1
    но в итоге надо вывести количество элементов соответствующее числу?
    – Grundy
    19 авг 2016 в 7:44
  • да, именно это нужно
    – J. Doe
    19 авг 2016 в 7:57

1 ответ 1

1

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

Если есть только число, то для превращения числа в массив можно использовать от фильтра, до своей директивы.

Например

angular.module('app', [])
  .controller('ctrl', function() {
    this.stars = 5;
    this.stars2 = 3;
  })
  .filter('toStarsArray', function() {
    return function(starsCount) {
      return new Array(starsCount);
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as c">
  <div>
    <span ng-repeat="item in c.stars | toStarsArray track by $index">{{$index+1}}</span>
  </div>
  <div>
    <span ng-repeat="item in c.stars2 | toStarsArray track by $index">
      <img src="http://vignette1.wikia.nocookie.net/inheritance/images/0/02/Icon_Star.svg.png/revision/latest?cb=20110116225452"/>
    </span>
  </div>
</div>

4
  • Попробовал и не смог понять как вывести html вместо числа? Например <li class="start"></li>?
    – J. Doe
    19 авг 2016 в 8:59
  • 1
    @J.Doe, во-первых, li должно быть внутри ul а не див. Во-вторых, так же как сейчас число выводится
    – Grundy
    19 авг 2016 в 9:00
  • у меня этот код выводит только один элемент, но в песочнице работает, а значит буду искать где я сделал ошибку
    – J. Doe
    19 авг 2016 в 9:57
  • разобрался: не привел к int число
    – J. Doe
    19 авг 2016 в 10:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.