angularjs input mapped to array element

Question

I'm new in Angularjs and I'm developing a kind of shopping cart I have and array:

 $scope.products = [
{id: '141', name: 'Apple', qty:0}, 
{id: '223', name: 'Orange', qty:0},
{id: '398', name: 'Banana', qty:0}];

By design limitation I need to do something like

<input type="text" ng-model="products[productID].qty"/>

(I can't use array element index I know it works.)

I've tried also with

ng-model="(p in products | filter: {id:'223'}).qty"

But I couldn't make it work

Please Could you help me ??

I will explain my shopping cart Let imagine that I need a table in the columns the sizes:s,m,l, xl in the rows models, but there are models that are manufactured in all sizes so I will have an input in every cell, but there are some that are only in l and xl and other in s and m So I will have a table with some empty cells. I know I can have a table that works as metadata where I can define columns, rows and the mapping and then develop a directive. My idea is design the table in HTML and assign to each cell the productID

I don't get it. You need to show one item from the products array? How do you know which one to show? — Mike Quinlan
– Mike Quinlan, Commented May 22, 2014 at 19:48
Yes I have to map one Item from the products array to an input and I need to map the product that has id=223 — Marcelo Sistemas
– Marcelo Sistemas, Commented May 22, 2014 at 19:52

Mike Quinlan · Accepted Answer · 2014-05-22 20:36:41Z

1

Basically you're going to have to select the id out from the array so in your directive/controller write something like this:

$scope.getProduct = function(id) {
  var product;
  angular.forEach($scope.products, function(p) {
    if(p.id === id) {
      product = p;
    }
  });
  return product;
};

Then:

$scope.selectedProduct = $scope.getProduct('223');

Then in your html:

<input ng-model="selectedProduct.qty"/>

EDIT: I have no idea if this is what you're talking about but here goes. (You do know about ngRepeat right?):

<table>
  <thead>... stuff</thead>
  <tbody>
    <tr ng-repeat="product in products">
      <td ng-bind="product.id"></td>
      <!-- bind other stuff here -->
      <td>
        <input ng-model="product.qty"/>
      </td>
    </tr>
  </tbody>
</table>

edited May 22, 2014 at 20:36

answered May 22, 2014 at 20:01

Mike Quinlan

2,88219 silver badges26 bronze badges

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

2 Comments

Marcelo Sistemas Over a year ago

I will explain my shopping cart

Marcelo Sistemas Over a year ago

I've edited my question and I add the description of my shopping cart

Collectives™ on Stack Overflow

angularjs input mapped to array element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related