Question

如果我简化了我的情况，我有一个我希望用户能够添加的数字列表。它们显示为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 - 那么该列表就有一个额外的元素，因此它读取[1,1,2,3,5]并且现在有 6 输入在页面上，最后一个是空的，略微透明。

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

Answer 1

不太确定“一旦使用”就明白了，但是一旦用户点击最后一个输入，就可以很容易地实现在列表中添加条目。见下文：

<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

表行绑定在angularJS中

1 个答案: