Kątowe powtórzenie n razy

Użyłbym niestandardowego filtru z

ng-repeat

:

HTML

<div ng-app='myApp' ng-controller="Main">

 <li ng-repeat="n in [] | range:20">

 <span class="glyphicon glyphicon-star" >{{n}}</span>

 [/*]

filtr

app.filter('range', function() {

 return function(val, range) {

 range = parseInt(range);

 for (var i=0; i<range; i++)

 val.push(i);

 return val;

 };

});

Próbny
<kbd>
Fiddle
http://jsfiddle.net/gwfPh/66/

</kbd>

Najkrótsza odpowiedź: 2 linie kodu
>

JS (w twoim kontrolerze

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"/>

.. gdzie

starCount

to liczba gwiazdek, które powinny pojawić się w tej lokalizacji.

możesz napisać szereg filtrów:

'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;

 };

});

użyj go

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

5 twój x

Kiedy po raz pierwszy zacząłem grać z AngularJS, znalazłem przyzwoity samouczek, który przeprowadzi Cię przez proces tworzenia niestandardowej dyrektywy, aby utworzyć widżet „Rating” w Angularjs.
http:// www.befundoo.com/uniwersytet/tutorices/dyrektywy angularjs-tutorial
http://www.befundoo.com/univer ... rial/
/
Nie robią nic specjalnego poza tworzeniem kolekcji pustych obiektów na podstawie wartości dwukierunkowej zmiennej zakresu zdefiniowanej w dyrektywie.

directive('fundooRating', function () {

 return {

 restrict: 'A',

 template: '<ul class="rating">' +

 '<li ng-repeat="star in stars" class="filled">' +

 '\u2605' +

 '[/*]' +

 '[/list]',

 scope: {

 ratingValue: '='

 },

 link: function (scope, elem, attrs) {

 scope.stars = [];

 for (var i = 0; i < scope.ratingValue; i++) {

 scope.stars.push({});

 }

 }

 }

});

Najlepsze jest to, że bałagan w kolekcji jest przynajmniej zamknięty w dyrektywie, a wszystko, co kontroler musi zrobić, to zmierzyć się z wartością liczbową oceny. W tym samouczku wyjaśniono również, jak wykonać dwukierunkową komunikację między dyrektywą a kontrolerem w zmiennej zakresu wartości oceny.
IMHO to najczystsze rozwiązanie, ponieważ AngularJS nie obsługuje bezpośrednio tego, co chcesz zrobić. Przynajmniej tutaj łatwo jest zobaczyć, co próbujesz zrobić w swoim kontrolerze i widoku (czyli tam, gdzie chcesz uniknąć niepotrzebnej złożoności) i przenosisz hakowanie do dyrektywy (którą prawdopodobnie raz napiszesz i zapomnisz).

Angular (wersja 1.2.9 i nowsze) zawiera filtr

limitTo: n

, który zrobi to zaraz po wyjęciu z pudełka. Na przykład, aby ograniczyć

ng-repeat

do pierwszych 20 elementów, użyj następującej składni:

<div ng-app='myApp' ng-controller="Main">

 <li ng-repeat="n in [] | limitTo:20">

 <span class="glyphicon glyphicon-star" >{{n}}</span>

 [/*]

Dokumentacja dla

limitTo

jest

tutaj
https://docs.angularjs.org/api ... rzeba przyznać, że filtr

limitTo

nie istniał w czasie, gdy zadawano pierwotne pytanie.

Odpowiedziałem na podobne (zduplikowane?) Pytanie

https://stackoverflow.com/a/31864879/1740079
https://stackoverflow.com/a/31864879/1740079... Po prostu opublikuję ponownie, ponieważ wylądowałem tutaj, szukając odpowiedzi.

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

 }

 }

})();

... i html:

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

PRZYKŁAD NA ŻYWO
http://codepen.io/nicooga/pen/PqVXPj/?editors=101