Angularjs: input for ng-repeat elements

Question

Sorry for my language skills, hope you understand all.

I need to make inputs for ng-repeat elements, to pass input data to http post. For example: i have 4 elements, for all elements i make inputs, and f.e:

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

Here is my code:

.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}}

And i dont know, how to pass input data to controller. Any tips,tricks?

Kobi Cohen · Accepted Answer · 2016-04-28 20:44:07Z

1

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

If you want the input to change data within your meal object, then do this:

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

And then the property value of the meal object would bind to the input

answered Apr 28, 2016 at 20:44

Kobi Cohen

6784 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

K.Dzien Over a year ago

So, now, what should i do, when i want see "example" input of, for example, first meal object?

Kobi Cohen Over a year ago

attach it to the "meal" object. <input ng-model="meal.example"> then when it render all the meals, every meal would have its own "example" input bound to the "example" property

Rob · Accepted Answer · 2016-04-28 20:45:43Z

Repeat through your mealList array and add the inputs.

Example: https://jsfiddle.net/ptzhL0uL/

Controller

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>

Kyle · Accepted Answer · 2016-04-28 20:39:49Z

0

Just attach it to the ngModel directive.

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

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

answered Apr 28, 2016 at 20:39

Kyle

5,6077 gold badges38 silver badges48 bronze badges

Collectives™ on Stack Overflow

Angularjs: input for ng-repeat elements

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related