Html Angular JS - 有一个空数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15444178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS - Having an empty array
提问by Jess McKenzie
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
我有一个表单将数据提交到一个名为的函数中，ng-submit="newBirthday()该函数将数据推 $scope.bdayname, $scope.bdaydate;送到一个名为的数组中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:
应用程序.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:
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>
回答by Josh David Miller
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 inbdays, giving you a local variable calledbdayto 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.
- 空数组必须没有项目；
[{}]是一个包含一项的数组：一个空对象。更改为[]摆脱多余的子弹。 - 更大的问题是你的 ngRepeat。你用过
ng-repeat="bdays in bdays"。ngRepeat 所做的是获取一个数组并允许您对数组执行“for each”，将每个值分配给该临时局部变量。你给它们起相同的名字。相反，ng-repeat="bday in bdays"将为 中的每个项目在其中添加 DOM 节点bdays，为您提供一个局部变量bday，用于引用每个项目。 - 在 ngRepeat 模板中，您使用了
bdae，它不引用任何内容。 - 我不知道是什么
app.initialize()，所以我删除了它。它只是在控制台中出错。
Here's a fixed Plunker: http://plnkr.co/edit/OFWY7o?p=preview
这是一个固定的 Plunker：http://plnkr.co/edit/OFWY7o?p=preview
