0

如果我简化我的情况，我有一个我希望用户能够添加到的数字列表。它们被显示为 HTML 输入框列表，我希望底部有一个额外的空行，一旦使用就会添加到列表中。有任何想法吗？

我已经尝试过了，但显然没有将第二个包含链接到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），那么列表就会有一个额外的元素，因此它会读取[1,1,2,3,5]并且页面上现在有6 个输入，其中最后一个是空的并且略微透明。

目的是让人们能够在没有“添加新行”按钮的情况下添加新的数据行。那有意义吗？

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 时，它将被添加到数字列表中，并且新的空输入将显示在列表底部。

可以找到一个工作小提琴here

于 2013-09-22T18:04:52.253 回答