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

10-06 04:36
查看更多