<label>Number of Meals :
<input type="number" name="meals" min="0" class="input" ng-model="meals"><br>
</label>
我想要做的是使用用户输入的数字来拥有“x”个膳食文本字段，这些文本字段将像这样显示。
例如，如果用户输入了 2：
Meal 1:
Calories [TEXT BOX]
Meal 2:
Calories [TEXT BOX]
我不太确定如何使用输入的数字来创建该数量的餐食
【问题讨论】：
<label ng-repeat="value in meals">Meal: {{value}}:<br>
Calories:<input type="text">
</label>
其中，餐点是您输入分配的范围变量餐点。这实质上是在说：
for(var i = 0; i < meals; i ++){
// generate html based on the value of i
}
如果餐点是一个数组，则使用餐点.长度，然后价值就相当于说
value = meals[i];
【讨论】：
您需要使用ng-repeat 来根据用户输入的数字显示n 文本框的数量。为此，您可以使用以下命令：
<label ng-repeat="n in [] | range: meals">
Meal {{ $index+1 }}:
<input type="text" ng-model="meal[$index]" /><br/>
</label>
这使用了我从this answer 获取的自定义过滤器。这是一个 plnkr 显示这个工作。
【讨论】：
您可以通过使用过滤器来实现此目的。
Javascript：
var app = angular.module('app', []);
app.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i=0; i<total; i++) {
input.push(i+1);
}
return input;
};
});
function Ctrl($scope){
}
HTML
<div ng-app='app' ng-controller="Ctrl">
Enter the meals: <input type="text" ng-model="meals" />
<label ng-repeat="meal in [] | range:meals"><br>
Meal: {{meal}}: <span>Calories:<input type="text"></span>
</label>
</div>
您可以阅读有关ng-repeat 的信息。您可以使用ng-repeat 指令循环通过array 或object。
如果您需要在不同的行中显示，请使用 css 规则设置 <span> 的样式：
label span {
display: block;
}
这是工作的js-fiddle
【讨论】：