Jess McKenzie Jess McKenzie - 5 months ago 25
AngularJS Question

Angular JS - Having an empty array

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>

Answer

Okay, there were a few of small issues.

  1. An empty array must have no items; [{}] is an array with one item: an empty object. Changing to [] gets rid of the extra bullet.
  2. 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.
  3. Inside the ngRepeat template, you used bdae, which doesn't reference anything.
  4. 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

Comments