角度の指示を繰り返します

Question

私は星のアイコンを作成する指示があります。私はそれをn回繰り返す。そして、私は 'アクティブ'のクラスを 'n'個の星に変えたいと思っています。 これは星を作る指令であり、クリックすると、クラス 'active'が追加されます。

<div ng-app="app"> 
    <div ng-controller="ctrl"> 
    <div class="presentation"> 
     <button-star repeatStars="7" limitActiveStar="5" classToAdd="active"></button-star> 
</div> 

.directive('buttonStar', function() { 
    return { 
    scope: { 
     repeatStars: "=", 
     limitActiveStar: "=", 
     classToAdd: "=" 
    }, 
    restrict: 'E', 
    template: '<button class="btn btn-icon"><span class="glyphicon glyphicon-star"></span></button>', 
    link: function(scope, elem) { 
    elem.addClass('active'); 
    } 
}; 
}) 

だから、私の例では、私が「アクティブ」ディレクティブを7回繰り返し、最初の5つの要素にクラスを追加したい

Answer 1

この中を追加お使いのコントローラ：その後、

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

<button-star ng-repeat="i in getNumber(number) track by $index" repeat-stars="7" limit-active-star="5" class-to-add="{{$index < 5 ? 'active' : ''}}"></button-star> 

210は、あなたが、その場合にはNGリピートディレクティブを使用できませんでした

Answer 2

を動作するはず？ あなたがitems

<button-star ng-repeat="item in items track by $index" ng-class="{'active': $index < 5}">

Answer 3

で7つのアイテムを持って認める私はここで、実用的なソリューションでplunkerを作った：

https://plnkr.co/edit/kX9yXUVwOC7ZD0qnyMt7?p=preview

を、私はいくつかの子ディレクティブの要素を持っているbuttonStarsと呼ばれる親ディレクティブを作成しました内部にbuttonStarがあります。最初のlimitActiveStarsにはクラスactiveが追加されますが、残りのクラスには追加されません。