在angularJS中綁定表格行

如果我簡化了我的情況，我有一個我希望用戶可以添加到的數字列表。它們被顯示爲一個HTML輸入框列表，我希望在底部有一個額外的空行，一旦它被使用就會被添加到列表中。有任何想法嗎？在angularJS中綁定表格行

我試過這個，但顯然沒有任何關聯第二個包含到numbers數組中。

$scope.numbers = [1,1,2,3];

其上顯示：

<ul> 
    <ng-include src="'row.html'" ng-repeat="number in numbers"></ng-include> 
    <ng-include src="'row.html'"></ng-include> 
</ul> 

<script type="text/ng-template" "id="row.html"> 
    <li><input type="number" ng-model="number" /></li> 
</script>

編輯：

我不知道爲什麼我有一個很難解釋這個：P我想象5個輸入對於上面的數據，4包含上面的數字和第五個是空的（並且可能具有不同的樣式，例如稍微透明）只要數字輸入到空的第五輸入 - 例如數字5 - 那麼列表具有一個額外的元素，所以它讀取[1,1,2,3,5]並且現在有頁面上的輸入，最後一頁是空的並且稍微透明。

目標是讓人們能夠在沒有「添加新行」按鈕的情況下添加新的數據行。那有意義嗎？

來源

2013-09-22 JP.

你的問題是完全不明確的善意解釋一下，並請提供您使用 –

angularjs的版本，希望其他文本解釋我的意圖滿！ –

不太清楚「只要它被使用」就能理解，但是一旦用戶在最後一次輸入時輸入，就可以在列表中添加一個條目。請看下圖：

<ul> 
    <ng-include src="'row.html'" ng-repeat="number in numbers"></ng-include> 
</ul> 
<form ng-submit="add()"> 
    <input type="number" ng-model="newNumber" /> 
</form>

而在你的控制器：

$scope.numbers = [1,1,2,3]; 
$scope.newNumber = ''; 

$scope.add = function() { 
    var parsed = parseInt($scope.newNumber); 
    if(!isNaN(parsed)){ 
     $scope.numbers.push(parsed); 
    } 
    $scope.newNumber = ''; 
}

每當用戶將砸在最後一個輸入將被添加到數字和一個新的空輸入的輸入列表將顯示在列表的底部。

的工作小提琴可以發現here

來源

2013-09-22 18:04:52

這幾乎就是我要找的東西，除非我希望它在輸入任何內容時「添加（）」新的數字，也許我可以''觀察''$ scope.newNumber'。我也將不得不使用從'newNumber'到'numbers'的轉移，因爲我的實際需求是針對整行數據（不只是一個數字），但是這非常糟糕！ –

在angularJS中綁定表格行

回答

相關問題