Question

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

我不太确定如何使用输入的数字并创建该数量的膳食

Answer 1

使用ng-repeat

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

如果用餐是一个阵列，请使用meal.length然后值相当于说

value = meals[i];

Answer 2

您需要使用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显示此工作。

Answer 3

您可以使用过滤器来实现此目的。

<强>使用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

使用输入框中的用户输入

3 个答案: