制作一个在AngularJS输入时复制的文本框？

Question

我正在尝试制作一系列文本框.它以一个文本框开头,但是当用户将信息放入其中时,其下方会出现另一个空文本框.这无限期地持续下去.

每个文本框都需要有一个ng-model与之关联的值,每个文本框都需要生成ng-repeat.

例如,我的HTML是这样的:

<table ng-controller="BoxesController">
  <tr ng-repeat="box in boxes">
    <td><input type="text" ng-model="box.input"></td> <!--boxes[0].input-->
  </tr>
</table>

我正在使用box.input而不仅仅是box因为它还需要为其分配其他变量.

然后我的控制器将是:

.controller('BoxesController',['$scope',function($scope){
  $scope.boxes = [
    {input: ""}
  ];

  if($scope.boxes[$scope.boxes.length - 1] !== ""){
    $scope.boxes.push({input: ""});
    $scope.$apply;
  }
}])

这将在视图中创建一个空框box.input === "".该if基本上是"如果数组中的最后一个值是不是空的,一个新的空值追加到数组中."

最初,整个事情应该创建一个空盒子,然后当用户逐框输入数据时生成更多盒子.

然而,它实际上做的是生成两个空盒子,根本不响应输入.

有谁知道该怎么做,如何使这项工作？

谢谢!

Answer 1

在一个方法中包装条件:

$scope.newBox = function() {
   if($scope.boxes[$scope.boxes.length - 1].input !== ""){
    $scope.boxes.push({input: ""});
    console.log( $scope.boxes)
    $scope.$apply;
  }
};

HTML:

<td><input type="text" ng-model="box.input" ng-blur="newBox()"></td>

演示