javascript - Angularjs:行的单个数组中的动态输入

Question

我是新手，我需要一些帮助来完成一些你可能觉得太简单的事情。

我想用一个按钮同时添加不同的输入。 我不知道如何管理。 这就是我正在做的事情，我被阻止了。 我会感谢你的想法。

因此，我的表单显示了每个名字和一个用于输入该人年龄的输入框(我们不知道“人员”中有多少人)。 最后，有一个调用 showAll() 函数的“提交”按钮。

然后，我只想在 console.log 中显示数组的内容

像这样的表格: Form with only 3 people

HTML:

<form name="myForm3">
  <div class="form-group row" ng-repeat="person in people track by $index">
    <label for="player" class="col-xs-3 col-form-label text-right">{{ person.name }}</label>
    <div class="col-xs-2">
      <input class="form-control" type="text"  ng-model="person.age[$index]" required>
    </div>
  </div>                    
    <button type="submit" class="btn btn-success btn-lg" ng-click="showAll()" >Show all</button>
</form>

controller.js:

  $scope.person = [];
  // POST
    $scope.showAll = function() {
        for (var i=0; i < person.length; i++){ 
    console.log('person: ' + {{ $scope.person[i] }} );

  }
} 

Answer 1

您可以使用 ng-if 或 ng-hide 隐藏输入，并通过设置这些输入使用的变量在 showAll 上显示它们为 true 或 false:

<div class="col-xs-2" ng-if="person.show">
  <input class="form-control" type="text"  ng-model="person.age[$index]" required>
</div>

在showAll中:

$scope.showAll = function() {
    for (var i=0; i < $scope.people.length; i++) { 
        $scope.people[i].show = true;
    }
};