Управление HTML одним нажатием кнопки (Meteor + Angular)

Question

Управление HTML одним нажатием кнопки (Meteor + Angular)

0

Я создаю приложение, в котором пользователь вводит имя блюда, которое он ел, а также калории для каждого блюда (прямо сейчас, я просто возился с названием части блюда).

То, что я хочу сделать, это дать пользователю 1 вход:

Item 1 : ___________
Button[ADD MORE ITEMS]

И если пользователь нажмет кнопку, он добавит больше строк элементов.

Контроллер:

Meals = new Mongo.Collection("meals-info");

if (Meteor.isClient) {
  var myApp = angular.module('calorie-counter',['angular-meteor']);

  Meteor.subscribe('meals-info');

  myApp.controller('formCtrl',['$scope','$meteor',function($scope,$meteor) {

  $scope.allMeals = $meteor.collection(Meals);

  $scope.meal = {
    items:[]
  };

  $scope.addItem = function() {
     $scope.meal.items.push({
       name:null,
       cal:null
     });
  }
 }]);
}

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

Посмотреть:

<div id="left" ng-controller="formCtrl">
    <div ng-repeat="???">
        <label>Item {{$index+1}}
            <input type="number" class="item" ng-model="???"><br>
            <button ng-click="addItem()">Add More Items</button>
        </label>
    </div>
</div>

Часть с '???' это часть, о которой я немного смущен. Я немного не уверен, как это сделать, чтобы иметь возможность обновлять представление с другим полем ввода для элемента и калорий (калория еще не реализована, сначала нужно получить часть элемента)

halapgos1 23 авг. 2015, в 02:30

Источник

Теги:

html

angularjs

meteor

1 ответ

Ещё вопросы

Sean Walsh · Accepted Answer · 2015-08-22T23-27-00.000Z

Во-первых, вам нужно переместить вашу кнопку за пределы ng-repeat если вы не хотите, чтобы кнопка отображалась после каждой строки.

Затем, чтобы перебирать предметы в еде, вы заселяете свой ng-repeat с помощью item in meal.items. Ваша ng-model (если вход для "name") будет item.name:

<div id="left" ng-controller="formCtrl">
    <div ng-repeat="item in meal.items">
        <label>Item {{$index+1}}
            <input type="number" class="item" ng-model="item.name"><br>
        </label>
    </div>
    <button ng-click="addItem()">Add More Items</button>
</div>

Именно то, что я тоже выяснил! Еще раз спасибо!