Блог

Я беру числовой ввод от пользователя. Я спрашиваю, сколько людей вы хотите? Предположим, что пользователь ввел 3.

У каждого «people» есть имя и фамилия.

Как только пользователь вводит количество «людей», которое он хочет, и нажимает «Отправить», я должен создать поля «firsrname» и «lastname» для стольких людей, сколько ввел пользователь (3 в этом примере).

Это код, который я написал. Просмотрите его и скажите мне, чего мне не хватает?

HTML:

 <div>
    <label for="people">Number of people</label>
    <input type="number" name="people" ng-model="vm.people">
</div>

<input type="submit" name="submitPeople" ng-click="vm.fillPeople()">

<div ng-if="vm.noOfPeopleArray.length != 0" ng-repeat="peopleArray in vm.noOfPeopleArray">
    <input type="text" name="test" ng-model="peopleArray.firstname">
    <input type="text" name="test" ng-model="peopleArray.lastname">
</div>
  

Вот как выглядит контроллер:

 vm.noOfPeopleArray = [];

vm.fillPeople = fillPeople;

function fillPeople() {
  fillPeopleArray();
  console.log("This is how big your desired array is.");
  console.log(vm.noOfPeopleArray);
  console.log("End result")
}




function fillPeopleArray() {
  for(var i=0; i<vm.people; i  ){
  vm.noOfPeopleArray.push({
  "firstname":'',
  "lastname": ''
  })
}
}
  

Консоль регистрирует сообщение и показывает мне, что мой массив был заполнен. Но что бы ни случилось, он не отображает часть после кнопки отправки. И я попробовал несколько вариантов.

Чего мне здесь не хватает? Пожалуйста, сообщите мне, какую любительскую ошибку я совершаю.

TIA

Является ли vm = $scope.vm ? Если нет, виртуальная машина является частной, и DOM не может получить к ней доступ. Вы должны присоединить виртуальную машину к области видимости, например $scope.vm = vm;

Если я правильно воспроизвел ваш контроллер из опубликованного вами фрагмента, вам необходимо настроить свой контроллер на использование $scope, как в примере ниже:

 function fillPeople() {

  fillPeopleArray();
  console.log("This is how big your desired array is.");
  console.log($scope.vm.noOfPeopleArray);
  console.log("End result")
}




function fillPeopleArray() {
  for(var i=0; i<$scope.vm.people; i  ){
  $scope.vm.noOfPeopleArray.push({
  "firstname":'',
  "lastname": ''
  })
}
  

откройте jsfiddle ниже

http://jsfiddle.net/3vzLbro8/?utm_source=websiteamp;utm_medium=embedamp;utm_campaign=3vzLbro8