如何處理與ngModel屬性動態添加輸入

Question

我有一個應用程序，用戶單擊按鈕時動態創建輸入元素。 它看起來是這樣的：

[輸入] [+]

即輸入有一個ng-model，並追加新的投入時，我可以用$compile有角對待他們，如果他們在DOM在引導時間。

我可以遞增ng-model值來說「item1」，「item2」等，但我不喜歡那樣。

我想知道是否有一個數組來保存所有輸入的所有值。

謝謝。

Answer 1

你可以試試這個：

HTML

<div ng-controller="myCtrl"> 
    <button ng-click="addInputField()">add</button> 
    <ul> 
    <li ng-repeat="item in items"> 
     <input type="text" id="item{{input.id}}" ng-model="item[$index]"/> 
    </li> 
    </ul> 
    data: 
    <div ng-repeat="item in items"> 
    {{item}} 
    </div> 
</div> 

控制器

angular.module('app',[]) 
.controller('myCtrl',function($scope){ 
    $scope.items = []; 
    $scope.addInputField = function(){ 
    $scope.items.push({}); 
} 
}); 

這裏是JSFiddle demo

'物品' 是結合輸入字段列表中的數據。您可以通過更新作用域內的項目數組來維護視圖，並將數組的元素綁定到每個輸入字段視圖。

希望這是有幫助的。