How to push i times in an array of objects in angularjs

Question

I have a data($scope.users) that I displays in the view. When the $scope.users length is less than 5 it should display 2 empty rows with null input boxes to make it 5 rows. The goal of the page is to display 5 rows even the other data is null.

I used $scope.users.push({}) to add. I also created a for loop but it only push a one row. It should add how many rows is needed.

What is wrong in my codes?

var mymodal = angular.module('mymodal', []);

mymodal.controller('MainCtrl', function($scope) {

    $scope.showRecords = function() {
        $scope.users = [{
            'id': 5,
            'username': 'ady',
            'role': 'Admin',
            'img': 'Jellyfish.jpg',
        }, {
            'id': 7,
            'username': 'tiu',
            'role': 'Admin',
            'img': 'Jellyfish.jpg',
        }, {
            'id': 4,
            'username': 'ert',
            'role': 'Admin',
            'img': 'Jellyfish.jpg',
        }];


        if ($scope.users.length < 5) {

            for (var i = 1; i < 5 - $scope.users.length; i++) {
                $scope.users.push({});
            }

        }

    }

    $scope.submit = function(users) {
        console.log(users);

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="mymodal">
  <div ng-controller="MainCtrl" class="container">


    <table class="table table-bordered">
      <tr ng-repeat="row in users">
        <!-- <td>{{row.id}}</td>
            <td>{{row.username}}</td>
            <td>{{row.role}}</td> -->
        <td>
          <input type="text" ng-model="row.id" name="id">
        </td>
        <td>
          <input type="text" ng-model="row.username" name="username">
        </td>
        <td>
          <input type="text" ng-model="row.role" name="role">
        </td>

      </tr>
    </table>
    <button ng-click="showRecords();">Show Record</button>

    <button ng-click="submit(users);">Submit new record</button>

Anik Islam Abhi · Accepted Answer · 2015-11-22 02:08:08Z

1

If length is 3 then you loops condition will be i < 2.

But you loop start from 1 and seek for i < 2.

After first iteration i will be 2 but your condition seeking value less then 2

Convert this

i < 5 - $scope.users.length

to this

i <= 5 - $scope.users.length

Or start from 0 instead of 1

Like this

for (var i = 0; i < 5 - $scope.users.length; i++)

answered Nov 22, 2015 at 2:08

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Santosh Kumar · Accepted Answer · 2015-11-24 18:12:27Z

0

You can make use of while loops:

    while($scope.users.length < 5) {
            $scope.users.push({});
    }

edited Nov 24, 2015 at 18:12

Santosh Kumar

28.3k21 gold badges72 silver badges126 bronze badges

answered Nov 24, 2015 at 17:21

Joao Polo

2,1631 gold badge17 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to push i times in an array of objects in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related