如何獲取表單輸入值以使用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