在制作我的应用程序时出现的问题是,AngularJS不允许对象拥有数组。
我正在制作一个卡路里计数器,用户可以在每个餐点添加任意数量的物品。每个膳食对象由以下表示:
$scope.meal = {
items:[],
createdBy:null
};
原因是,我给用餐对象一个数组是因为我希望用户可以选择添加尽可能多的项目。这是布局:
Button [ADD ITEM] //User clicks on it
Item 1 [_________]
Calories [________]
Button [ADD ITEM]
基本上,每次用户点击添加项目时,他/她都会尝试在用餐中添加另一项,这就是我使用数组的原因。以下是视图中发生的情况:(使用ng-repeat指令重新打印HTML)
<div id="left" ng-controller="formCtrl">
Enter the number of items in your meal :
<br><br>
<div ng-repeat="item in meal.items">
<label>Item {{$index+1}} :
<input type="text" class="item" ng-model="item.name"><br>
</label>
<label>Calories :
<input type="number" class="calories" ng-model="item.cal"><br>
</label>
<br>
</div>
<div style="text-align:center;">
<button ng-click="addItem()" id="itemButton">+ Item</button>
<button ng-click="submit()" id="submitButton">Submit</button>
</div>
不确定是否需要这个,但这里是addItem():
$scope.addItem = function() {
$scope.meal.items.push({
name:null,
cal:null
});
}
我在堆栈上发布了另一个问题,要求解决我目前遇到的AngularJS问题。请在此处查看:Error: key $$hashKey must not start with '$' (AngularJS)
我还向Urigo / Angular-Meteor发布了一个问题,但我不确定修复它需要多长时间。与此同时,我一直试图想出解决这个问题的其他方法。基本上,尝试具有相同的功能,但更改它的数组部分。