如何获取表单输入值以使用Angular.js替换提交表单

Question

I'm new to Angular. 我是Angular的新手。 I have a form in an ordered list. 我在有序列表中有一个表格。 When a user inputs a value in the form and clicks "add", I'd like the value from the form to replace the form, and another list item added below with the same form allowing the user to add another item, etc., etc. 当用户在表单中输入值并单击“添加”时，我希望表单中的值替换表单，并在下面以相同的表单添加了另一个列表项，允许用户添加其他项，依此类推，等等

Below is what I've got so far. 以下是到目前为止我得到的。 I have the ordered list with form input, but right now when you click "add", the item appears below as a separate list item instead of replacing the form. 我有带有表单输入的有序列表，但是现在当您单击“添加”时，该项目在下面显示为单独的列表项，而不是替换表单。 I'd like it to replace the form, then insert a new list item below with the same form so the user can continue to add items to the list in this manor. 我希望它替换表单，然后在下面使用相同的表单插入一个新的列表项，以便用户可以继续在此庄园中向列表中添加项。

items.html 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 items.js

function ItemCtrl($scope) {
  $scope.items = [];

  $scope.addItem = function() {
    $scope.items.push({text:$scope.itemText});
    $scope.itemText = '';
  };
}

http://jsfiddle.net/kL4rp/ http://jsfiddle.net/kL4rp/

How do I get that to work as described? 如何使它按说明工作？

Thanks 谢谢

Answer 1

Looks like you just need to switch the form and ng-repeat directive. 看起来您只需要切换form和ng-repeat指令即可。

Like so: 像这样：

<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 jsfiddle示例

Answer 2

I edited your fiddle: 我编辑了你的小提琴：

http://jsfiddle.net/kL4rp/2/ http://jsfiddle.net/kL4rp/2/

I believe if you just place the ng-repeat of items above the form you will achieve the desired behavior. 我相信，只要将项目的ng-repeat放在表格上方，即可达到预期的效果。

    <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>

如何获取表单输入值以使用Angular.js替换提交表单

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-12-22 21:55:16

解决方案2
0 2013-12-22 22:00:16

如何获取表单输入值以使用Angular.js替换提交表单

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-12-22 21:55:16

解决方案2 0 2013-12-22 22:00:16

解决方案1
2 已采纳 2013-12-22 21:55:16

解决方案2
0 2013-12-22 22:00:16