html - 使用来自输入框的用户输入

Question

<label>Number of Meals :
 <input type="number" name="meals" min="0" class="input" ng-model="meals"><br>
</label>

我想做的是使用用户输入的数字来显示“x”个 Meal 文本字段，它们将像这样显示。

例如，如果用户输入 2:

Meal 1:
   Calories [TEXT BOX]
Meal 2:
   Calories [TEXT BOX]

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

Answer 1

您可以使用过滤器来实现这一点。

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