Question

我正在从用户那里获取数字输入。我问你想要多少人？让我们假设用户输入了3.

每个＆＃34;人＆＃34;有一个名字和一个姓氏。

用户输入＆＃34;人数＆＃34;它想要并按下提交，我必须制作＆＃34; firsrname＆＃34;和＆＃34;姓氏＆＃34;用户输入的人数（本例中为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

Answer 1

vm = $ scope.vm？如果没有，vm是私有的，DOM无法访问它。您必须将vm附加到范围，例如$ scope.vm = vm;

Answer 2

如果我从您发布的代码段中正确地再现了您的控制器，您必须配置您的控制器以使用$ 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=website&utm_medium=embed&utm_campaign=3vzLbro8

Ng-如果不在屏幕上呈现ng-repeat

2 个答案: