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

Question

我是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/

如何使它按说明工作？

谢谢

Answer 1

看起来您只需要切换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示例

Answer 2

我编辑了你的小提琴：

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

我相信，只要将项目的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