use ng-repeat with fixed number of times

Question

I want to use ng-repeat with a fixed number of iterations. Below I am trying to plunker, but I am getting an error. So I'm wondering where I should write getTimes() in my Code.

My code :: plnkr.co/edit/POjQta4kFlCrJfZAFkQc?p=preview

what i am trying to use :: http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj?p=preview

Directive ::

   <my-dir 
            bgcolor="#EFF"
            my-title="Iram" 
            my-height="200"
            my-width="450"
            my-color="cyan"
            my-bgcolor="pink"
            my-collapseoption=true
            my-widgetno="1"
            save="saveChanges('custom directive')">template
          </my-dir>

ng-Directive ::

app.directive("myDir", function() {
  return {
    restrict: "E",
    scope: {
      items:"=",
      myTitle: "@",   // by value
      myHeight: "@",   // by value
      myWidth: "@",   // by value
      myColor: "@",   // by value
      myBgcolor: "@",   // by value
      myWidgetno: "@", // by reference
      myCollapseoption: "@", // by reference            
      save: "&"    // event
    },

    templateUrl:"widget.html", 
      //"<div><h2>  And This is Title{{myTitle}} </div>",
    replace: true,
    transclude: false,
    link: function (scope, element, attrs) {

        // show initial values: by-val members will be undefined
       console.log("items is " +scope.items);


        // change element just to show we can
        element.css("background", attrs.myBgcolor);
        element.css("color", attrs.myColor);
        element.css("width", attrs.myWidth+'px');
       // element.css("height", attrs.myHeight+'px');

    }
  }
});

Template ::

   <div>

<div class="panel panel-primary" ng-repeat="t in getTimes(4) | limitTo:2"> 
            <div class="panel-heading"> 
                <span class="glyphicon glyphicon-th-large"></span>{{myTitle}}{{items}}
                <div class="btn-group pull-right">
                    <button type="button" class="btn btn-default btn-xs" ng-show="myCollapseoption" ng-click="checked=!checked">
                        <span class="glyphicon glyphicon-chevron-down "></span>
                    </button>                        
                </div>
            </div>
            <div class="panel-body collapsible" ng-init="checked=true" ng-show="checked"  ng-style="{'background-color':'pink'}" style="clear:both;">
            This is the middle Content <br/><br/><br/>
            </div>
        </div>
  </div>  

Answer 1

You need to write controller for that directive. Like this:

controller: function($scope) {
     $scope.getTimes=function(n){
        return new Array(n);
     };  
}

See working Demo

Why track by $index with ng-repeat

As you are returning array having duplicate values, it will throws an error of duplicate values not allowed. You can solve this issue using track by as I've done or you can modify getTimes function which creates an array with unique values.

UPDATE

When you pass variable, its not working because the value is string.

var a = new Array("3")

The above statement will create an array of length 1 i.e ["1"]. This is what problem is.

You need to update statement as below:

controller: function($scope) {
     $scope.getTimes=function(n){
         return new Array(parseInt(n));
     };  
}

Updated code - See here