javascript - 制作一个在 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 将是:

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

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

这将在 box.input === "" 的 View 中创建一个空框。 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>

Demo