Как отслеживать два массивных данных массива с помощью 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',[]); 

Дополнительная информация в docs.

// 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>