Использование пользовательского ввода из поля ввода

Question

Использование пользовательского ввода из поля ввода

0

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

Я не слишком уверен, как я могу использовать введенный номер и создать такое количество блюд

halapgos1 18 авг. 2015, в 02:26

Источник

Теги:

html

angularjs

css

3 ответа

0

Использовать 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];

user3727843 17 авг. 2015, в 22:35

0

Вам нужно будет использовать ng-repeat чтобы отобразить n количество текстовых полей на основе числа, которое пользователь набрал. Для этого вы можете использовать следующее:

  <label ng-repeat="n in [] | range: meals">
    Meal {{ $index+1 }}:
    <input type="text" ng-model="meal[$index]" /><br/>
  </label>

Это использует специальный фильтр, который я взял из этого ответа. Вот plnkr, показывающий эту работу.

keithm 17 авг. 2015, в 21:29

Ещё вопросы

Subash · Accepted Answer · 2015-08-17T22-02-00.000Z

Вы можете добиться этого, используя фильтр.

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> если вам нужно отобразить строку differnet:

label span {
   display: block;
}

Вот рабочий js-скрипка

Просто быстрый вопрос, для ввода калорий, где именно хранится ввод калорий с помощью «еды [$ index]»? Из моего понимания контроллера кажется, что еда - это массив объектов, который имеет 2 атрибута (количество и калории). Я просто немного сбит с толку, как мы устанавливаем каждый вход Калории в атрибут калории.
@ halapgos1 Я обновил свой ответ, чтобы упростить решение и надеюсь, что вам будет легче понять. Я сейчас использую фильтры. jsfiddle тоже обновляется.