如何獲取表單輸入值，以取代與Angular.js

提交我是新來的角形式。我有一個有序列表中的表單。當用戶在輸入表格的值，並點擊「添加」，我想從表單中值替換形式，並且另一個列表項具有相同的形式下面加入允許用戶添加另一個項目等，等如何獲取表單輸入值，以取代與Angular.js

下面就是我這麼遠。我有一個表單輸入的有序列表，但現在，當你點擊「添加」，該項目下面顯示爲一個單獨的列表項，而不是替換形式。我想它來替換形式，然後插入下面同樣形成一個新的列表項，以便用戶可以繼續將項目添加到列表中的這個莊園。

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/

我如何得到這所描述的工作嗎？

謝謝

來源

2013-12-22 aressidi

看起來你只需要切換窗體和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

來源

2013-12-22 21:55:16

謝謝。我剛剛發現了同樣的事情，並正在回答我自己的問題。我希望這是簡單的，它是！感謝瑞恩的快速反應！ – aressidi

我編輯你的提琴：

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

我相信，如果你只是把表格你將上述項目的NG-重複達到預期的行爲。

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

來源

2013-12-22 22:00:16 user2923779

如何獲取表單輸入值，以取代與Angular.js

回答

相關問題