我是Angular的新手。我在有序列表中有一个表格。当用户在表单中输入值并单击“添加”时,我希望表单中的值替换表单,并在下面以相同的表单添加了另一个列表项,允许用户添加其他项,依此类推,等等
以下是到目前为止我得到的。我有带表单输入的有序列表,但是现在单击“添加”时,该项目在下面显示为单独的列表项,而不是替换表单。我希望它替换表单,然后在下面使用相同的表单插入一个新的列表项,以便用户可以继续在此庄园中向列表中添加项。
items.html
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="items.js"></script>
</head>
<body>
<h2>Items</h2>
<div ng-controller="ItemCtrl">
<ol>
<li>
<form ng-submit="addItem()">
<input type="text" ng-model="itemText" size="30"
placeholder="add new item to list">
<input class="btn-primary" type="submit" value="add">
</form>
</li>
<li ng-repeat="item in items">
<span>{{item.text}}</span>
</li>
</ol>
</div>
</body>
</html>
items.js
function ItemCtrl($scope) {
$scope.items = [];
$scope.addItem = function() {
$scope.items.push({text:$scope.itemText});
$scope.itemText = '';
};
}
http://jsfiddle.net/kL4rp/
如何使它按说明工作?
谢谢
最佳答案
看起来您只需要切换form和ng-repeat指令即可。
像这样:
<div ng-controller="ItemCtrl">
<ol>
<li ng-repeat="item in items">
<span>{{item.text}}</span>
</li>
<li>
<form ng-submit="addItem()">
<input type="text" ng-model="itemText" size="30"
placeholder="add new item to list">
<input class="btn-primary" type="submit" value="add">
</form>
</li>
</ol>
</div>
jsfiddle example