Angular JS - Having an empty array

Question

I have a form that submits data into a function called ng-submit="newBirthday() this pushes data - $scope.bdayname, $scope.bdaydate; into an array called bdaes

My issue is that with all of the tutorials I have seen the array has predefined data is there a way that it can be an empty array that gets filled with data when it is submitted?

app.js:

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

app.controller('main', function($scope){ 

    // Start as not visible but when button is tapped it will show as true 

        $scope.visible = false;

    // Create the array to hold the list of Birthdays

        $scope.bdays = [{}];

    // Create the function to push the data into the "bdays" array

    $scope.newBirthday = function(){

        $scope.bdays.push({name:$scope.bdayname, date:$scope.bdaydate});

        $scope.bdayname = '';
        $scope.bdaydate = '';

    }
});

HTML:

<body ng-app="birthdayToDo" ng-controller="main">
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Birthday Reminders</h1>
        </div>
            <ul ng-repeat="bdays in bdays">
                <li>{{bdae.name}} | {{bdae.date}}</li>
            </ul>

           <form ng-show="visible" ng-submit="newBirthday()">
            <label>Name:</label>
            <input type="text" ng-model="bdayname" placeholder="Name"/>
            <label>Date:</label>
            <input type="date" ng-model="bdaydate" placeholder="Date"/>
            <button class="btn" type="submit">Save</button>
        </form>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <a class="btn" ng-click="visible = true"><i class="icon-plus"></i>Add</a>
      </div>
    </div>
        <script type="text/javascript" src="js/cordova-2.5.0.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>

Can you post a Plunker with this? I'm having trouble seeing it. Your use of bdae vs bday is a little confusing. Also, your array isn't empty - it has one empty object in it. An empty array is simple $scope.bdays = [];. If you post a Plunker, I'll be able to sort it out. — Josh David Miller
– Josh David Miller, Commented Mar 16, 2013 at 17:48

Josh David Miller · Accepted Answer · 2013-03-16 18:25:30Z

12

Okay, there were a few of small issues.

An empty array must have no items; [{}] is an array with one item: an empty object. Changing to [] gets rid of the extra bullet.
The bigger issue was your ngRepeat. You used ng-repeat="bdays in bdays". What ngRepeat does is take an array and allow you to do a "for each" on the array, assigning each value to that temporary local variable. You named them the same. Instead, ng-repeat="bday in bdays" will add the DOM nodes inside of it for each item in bdays, giving you a local variable called bday to use to reference each item.
Inside the ngRepeat template, you used bdae, which doesn't reference anything.
I don't know what app.initialize() is, so I removed it. It was just erroring out in the console.

Here's a fixed Plunker: http://plnkr.co/edit/OFWY7o?p=preview

answered Mar 16, 2013 at 18:25

Josh David Miller

121k16 gold badges129 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

Angular JS - Having an empty array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related