如何使用Angularjs跟踪二维数组数据

Question

我是Angularjs的新手。我学习了一些基本概念，并开始开发一个表单。根据我的要求，我必须提供4个文本框，如果用户想要更多，他会再添加4个文本盒。同时，我无法跟踪输入的详细信息。

// create angular app
  var validationApp = angular.module('validationApp','');
  // create angular controller
  validationApp.controller('mainController', function($scope) {
$scope.choices = [{id: 'choice1'}];
    $scope.addNewChoice = function() {
      var newItemNo = $scope.choices.length+1;
      $scope.choices.push({'id':'choice'+newItemNo});
    };
    $scope.showChoiceLabel = function (choice) {
      return choice.id === $scope.choices[0].id;
    };
    $scope.removeChoice = function() {
      if($scope.choices.length>1){
        var newItemNo = $scope.choices.length-1;
        $scope.choices.pop();
      }
    };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="validationApp" ng-controller="mainController">  
<div class="form-group" data-ng-repeat="choice in choices">
            <label for="choice" ng-show="showChoiceLabel(choice)">Family Details</label>
            <input type="text" ng-model="choice.name" name="id.family_name" class="form-control" placeholder="Enter Family Memeber Name" size="20">
            <input type="text" ng-model="choice.relation" name="id.family_relation" class="form-control" placeholder="Enter Relation" size="15">
            <input type="text" ng-model="choice.age" name="id.family_age" class="form-control" placeholder="Enter Age" size="5">
            <input type="text" ng-model="choice.qualification" name="id.family_qualification" class="form-control" placeholder="Enter Qualification" size="15">
            <br/><button ng-show="$last" ng-click="addNewChoice()" class="btn btn-success">Add another member</button>
            <button ng-show="$last" ng-click="removeChoice()" class="btn btn-danger">Remove field</button>
        </div>
  </div>

Answer 1

您在初始化应用程序时出错。angular.module('validationApp', [])中的空数组。此数组是myApp所依赖的模块列表：

var validationApp = angular.module('validationApp',[]);

文档中的更多信息。

// create angular app
var validationApp = angular.module('validationApp', []);
  // create angular controller
  validationApp.controller('mainController', function($scope) {
    $scope.choices = [{id: 'choice1'}];
    $scope.addNewChoice = function() {
      var newItemNo = $scope.choices.length + 1;
      $scope.choices.push({id:'choice' + newItemNo});
    };
    $scope.showChoiceLabel = function(choice) {
      return choice.id === $scope.choices[0].id;
    };
    $scope.removeChoice = function() {
      if($scope.choices.length > 1) {
        var newItemNo = $scope.choices.length - 1;
        $scope.choices.pop();
      }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="validationApp" ng-controller="mainController"> 
<div class="form-group" data-ng-repeat="choice in choices">
            <label for="choice" ng-show="showChoiceLabel(choice)">Family Details</label>
            <input type="text" ng-model="choice.name" name="id.family_name" class="form-control" placeholder="Enter Family Memeber Name" size="20">
            <input type="text" ng-model="choice.relation" name="id.family_relation" class="form-control" placeholder="Enter Relation" size="15">
            <input type="text" ng-model="choice.age" name="id.family_age" class="form-control" placeholder="Enter Age" size="5">
            <input type="text" ng-model="choice.qualification" name="id.family_qualification" class="form-control" placeholder="Enter Qualification" size="15">
            <br/><button ng-show="$last" ng-click="addNewChoice()" class="btn btn-success">Add another member</button>
            <button ng-show="$last" ng-click="removeChoice()" class="btn btn-danger">Remove field</button>
        </div>
  </div>