Question

对不起我的语言技能，希望你能理解所有。

我需要为ng-repeat元素输入，将输入数据传递给http post。例如：我有4个元素，对于我输入的所有元素，以及f.e：

elem1- input: 1 
elem2- input: 4 
elem3- input: 1 
elem4- input: 2

这是我的代码：

.panel-body.note-link ng-repeat=("meal in mealsList track by $index")
                    a data-toggle="tab" 
                      h4.pull-right.text-muted
                        | {{meal.price}} zł

                    h4.text-success
                        i.fa.fa-close.text-danger<> ng-click="removeMeal($index)" style="cursor: pointer;font-size: 15px;"
                        | {{meal.name}} {{$index}}
                        input.form-control type="number"  ng-model="example"
                        | {{example}}

我不知道，如何将输入数据传递给控制器。任何提示，技巧？

Answer 1

angular.module('yourModule').controller('viewController', function($scope) {
  $scope.mealList = [...];
  $scope.example; //The input data will automatically bind to this variable.
});

如果您希望输入更改用餐对象中的数据，请执行以下操作：

input.form-control type="number"  ng-model="meal.example"

然后，膳食对象的属性值将绑定到输入

Answer 2

重复您的mealList数组并添加输入。

示例：https://jsfiddle.net/ptzhL0uL/

<强>控制器

function Controller1($scope) {
  var vm = this;

  vm.items_saved = false;
  vm.mealList = [{
    price: '2.99',
    name: 'Pizza'
  }, {
    price: '1.99',
    name: 'Chips'
  }, {
    price: '4.99',
    name: 'Beer'
  }];

  vm.addNewItem = addNewItem;
  vm.saveItems = saveItems;

  function addNewItem() {
    vm.mealList.push({});
  }

  function saveItems() {
    vm.items_saved = true;
  }
}

<强> HTML

<button ng-click="ctrl.addNewItem()" class="btn btn-default">Add Item</button>
<div ng-repeat="item in ctrl.mealList">
  <input type="text" ng-model="item.name">
  <input type="text" ng-model="item.price">
  <input type="number" ng-model="item.quantity">
</div>
<button ng-click="ctrl.saveItems()" class="btn btn-primary">Save</button>
<hr>
<div ng-if="ctrl.items_saved">
  <h4>Here is your meal list:</h4>
  <ul>
    <li ng-repeat="item in ctrl.mealList">{{item.quantity}}{{item.name}} at ${{item.price}} each</li>
  </ul>
</div>

Answer 3

只需将其附加到ngModel指令。

<div ng-repeat="item in array">
    {{ item.output }}

    <input ng-model="item.output" />
</div>

Angularjs：ng-repeat元素的输入

3 个答案: