0

状況を単純化すると、ユーザーが追加できる番号のリストがあります。それらは HTML 入力ボックスのリストとして表示されており、使用するとすぐにリストに追加される余分な空の行が一番下にあることを望みます。何か案は？

私はこれを試しましたが、明らかに、2番目のインクルードを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 番目は空です (そして、スタイルが異なる可能性があります。たとえば、わずかに透明です)。空の 5 番目の入力 (たとえば、数字の 5) に数字が入力されるとすぐに、リストに余分な要素が含まれるため、ページに6 つ[1,1,2,3,5]の入力があり、最後の入力は空でわずかに透過的です。

目的は、「新しい行を追加」ボタンがなくても、人々がデータの新しい行を追加できるようにすることです。それは理にかなっていますか？

4

1 に答える 1

1

「使用するとすぐに」を理解することはよくわかりませんが、簡単に達成できるのは、ユーザーが最後の入力でEnterキーを押したらすぐにリストにエントリを追加することです。下記参照 ：

<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 = '';
}

ユーザーが最後の入力で Enter キーを押すたびに、数字のリストに追加され、新しい空の入力がリストの下部に表示されます。

動作するフィドルはここにあります

于 2013-09-22T18:04:52.253 に答える