Question

我正在创建一个应用程序，用户输入他/她吃的菜的名称以及每道菜的卡路里（现在，我只是弄乱了菜部分的名称）。

我想要做的是给用户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>

“???”的部分是我有点困惑的部分。我有点不确定如何去做那里的事情，以便能够更新视图w /另一个输入字段的项目和卡路里（卡路里还没有实现，想要首先正确的项目部分）

Answer 1

首先，除非您希望每行后显示按钮，否则您需要将按钮移到ng-repeat之外。

然后，要迭代用餐中的项目，您需要使用ng-repeat填充item in meal.items。您的ng-model（假设输入是“名称”）将为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>

只需单击按钮即可操作HTML（Meteor + Angular）

1 个答案: