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>

Demo

Answer 2

作为上面的答案，尝试使用一种方法。这是使用ng-change的另一个例子。

angular.module('app',[])
.controller('BoxesController',['$scope',function($scope){
  $scope.boxes = [
    {}
  ];
  
  $scope.callChange = function() {
    if($scope.boxes[$scope.boxes.length - 1].val !== ""){
      $scope.boxes.push({val: ""});
    }
  };  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <table ng-controller='BoxesController'>    
    <tr ng-repeat="box in boxes">
      <td><input type="text" ng-model="box.val" ng-change="callChange()"></td>
    </tr>
  </table>
</div>

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

2 个答案: