为什么我的angularJS不能在DOM中正确更新?
所以,我正在使用AngularJS路由和参数进行应用。我设置了控制器,出于某种原因,当我转到其中一个页面时,我的应用程序不会从angularJS代码中提取数组,也不会添加我的项目!有任何想法吗?为什么我的angularJS不能在DOM中正确更新?
这里是我的角度:
.controller("foodController", function ($scope) {
$scope.addItem;
$scope.foodItem = "";
$scope.foodArray = ['Milk', 'PB&J'];
//add items here
$scope.addItem = function() {
/*if ($scope.foodItem = '') {
alert('What did the child eat?');
} else {*/
$scope.foodArray.push($scope.foodItem);
$scope.foodItem = '';
};
});
这里是我的HTML:
<body ng-app="myApp" ng-controller="foodController">
<form ng-submit="addItem()">
<h1>Food Chart</h1>
<input type="text" placeholder="What did the child eat today?" ng-model="foodItem" />
<button type="submit" id="submit">Submit</button>
</form>
{{ foodItem }}
<section>
<h1>Food Log</h1>
<tr ng-repeat="item in foodArray">
<td> {{ item }}</td>
<td>
<button ng-click="removeItem(item)"> Remove Item</button>
</td>
</tr>
</section>
预先感谢您!
您需要在表格中查看tr
遍历行试试这个:
<div ng-controller="foodController">
<form ng-submit="addItem()">
<h1>Food Chart</h1>
<input type="text" placeholder="What did the child eat today?" ng-model="foodItem"/>
<button type="submit" id="submit">Submit</button>
</form>
{{ foodItem }}
<section>
<h1>Food Log</h1>
<table>
<tbody>
<tr ng-repeat="item in foodArray">
<td> {{ item }}</td>
<td>
<button ng-click="removeItem(item)"> Remove Item</button>
</td>
</tr>
</tbody>
</table>
</section>
</div>
顺便说一下,如果你使用路由或者在你提供的代码之外声明你的控制器,那么我在ng-controller中添加了一个div,删除那个div – arg20
我们去了。谢谢。我没有花太多时间使用表,这就是为什么我试图使用他们这个项目。非常感谢!现在完美的工作! – Xiggy
是的,我刚刚在
包你TR表中的元素
<section>
<h1>Food Log</h1>
<table>
<tr ng-repeat="item in foodArray">
<td> {{ item }}</td>
<td>
<button ng-click="removeItem(item)"> Remove Item</button>
</td>
</tr>
</table>
</section>
这里是一个工作花掉 http://plnkr.co/edit/JYE3tVLubyM6FDbRm54k?p=preview
我希望我可以点击“接受”为你们!谢谢你!我绝对需要在桌子上做更多的工作,并自己练习。 – Xiggy
我没看到你指定的地方控制器包装你的HTML。 – Marc
当我复制/粘贴时,我遗失了身体标记!我的错! – Xiggy
是否正确显示了“{{foodItem}}”? –