Limit array length Angular.js

Question

Limit array length Angular.js

How can I set the an arrays maximum length to only 11. Does this need to be done in the view with LimitTo? or do I need to declare another variable to the controller?

       bowlingApp.controller('bowlPoints', function ($scope){
    $scope.bowlPoints = [];

    $scope.addBowlPoints = function() 
    {
      $scope.bowlPoints.push($scope.enteredPoints);
    };
  });

<td ng-repeat="points in bowlPoints track by $index | limitTo:11">{{points}}</td>

angularjs

Answer 1

You can use limitTo but while using track by with limitTo you need to make sure you are tracking limited rows, not all of them. Otherwise you will end up showing all the results not just the limited count. So move track by to the end:

   <td ng-repeat="points in bowlPoints | limitTo:11 track by $index">{{points}}</td>

But however this does not set your source array restricted to a specific length, instead it will display only limited count.

If your main concern is limiting the original array itself, just disable the add functionality on the UI so that the addBowlPoints is not called anymore (Assuming this is done from the UI), when the size limit has been reached.

Answer 2

While 'limitTo' will probably work in the scenario, another way to do this in the controller would be to set up an if statement before adding points to the array:

       bowlingApp.controller('bowlPoints', function ($scope){
$scope.bowlPoints = [];

$scope.addBowlPoints = function() {
  if(($scope.bowlPoints.length + $scope.enteredPoints.length) < 12) {
    $scope.bowlPoints.push($scope.enteredPoints);
  }
};

});