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

看起来您只需要切换表单和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

Answer 2

我编辑了你的小提琴：

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

我相信如果您只是在表格上方放置重复项目，您将获得所需的行为。

    <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 个答案: