使用固定次數的ng-repeat

Question

我想用固定次數的迭代使用ng-repeat。下面我試圖闖入，但我得到一個錯誤。所以我想知道我應該在哪裏寫代碼getTimes()。

我的代碼:: plnkr.co/edit/POjQta4kFlCrJfZAFkQc?p=preview

什麼，我試圖用:: http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj?p=preview

指令::

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

    } 
    } 
}); 

模板::

<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

你需要寫controller該指令。 像這樣：

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

見工作Demo

爲什麼track by $index與NG-重複

當您有重複的值返回數組，它會引發重複值的錯誤不允許的。您可以像我這樣使用track by來解決這個問題，或者您可以修改getTimes函數，該函數創建一個具有唯一值的數組。

UPDATE

當你傳遞變量，它不工作，因爲該值是字符串。

var a = new Array("3") 

上述語句將創建一個長度爲1的數組，即[「1」]。這是什麼問題。

您需要更新聲明如下：

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

更新代碼 - See here