title: How can I create an array from the values of DOM elements with AngularJS?
body: <p>I have a number of hidden input fields on a page. I want to read the values of these input fields into an array. The input fields have this structure:</p>
  <pre><code> &lt;div class=&quot;loadedFood&quot; ng-model=&quot;savedFood&quot;&gt;
    &lt;div class=&quot;foodItem&quot;&gt;
      &lt;input type=&quot;hidden&quot; name=&quot;[food][61][uid]&quot; value=&quot;61&quot; /&gt;
      &lt;input type=&quot;hidden&quot; name=&quot;[food][61][unit]&quot; value=&quot;30.00&quot; /&gt;
      &lt;input type=&quot;hidden&quot; name=&quot;[food][61][quantity]&quot; value=&quot;4&quot; /&gt;
      &lt;input type=&quot;hidden&quot; name=&quot;[food][61][total]&quot; value=&quot;120&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;foodItem&quot;&gt;
      &lt;input type=&quot;hidden&quot; name=&quot;[food][67][uid]&quot; value=&quot;67&quot; /&gt;
      &lt;input type=&quot;hidden&quot; name=&quot;[food][67][unit]&quot; value=&quot;7.00&quot; /&gt;
      &lt;input type=&quot;hidden&quot; name=&quot;[food][67][quantity]&quot; value=&quot;6&quot; /&gt;
      &lt;input type=&quot;hidden&quot; name=&quot;[food][67][total]&quot; value=&quot;42&quot; /&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  <p>I want to read these into an array <code>loadedFood</code> with each div <code>fooditem</code> becoming a new array element, containing the names and values of the hidden inputs, like:</p>
  <pre><code>[{
   uid : 61,
   unit : 7.00,
   quantity : 6,
   total : 42,
  }    {
   uid : 67,
   unit : 3.00,
   quantity : 3,
   total : 42,
  }]
  </code></pre>
  <p>I can push the value of each individual input on the page to the array <code>loadedFood</code> like this:</p>
  <pre><code> $scope.savedFood = angular.forEach(angular.element(&quot;.foodItem input&quot;), function (value, key) {
   var a = angular.element(value);
       value = a.attr(&quot;value&quot;);
       console.log(value)
       $scope.loadedFood.push(value);
   });
  </code></pre>
  <p>But obviously that's not what I want. I need to create a new element for each <code>.foodItem</code>, and then add both the name and the value of each input within it, and then push the whole element to loadedFood. I'm stuck on the very basic problem of how DOM element selectors work in AngularJS- trying to do something JQueryish like</p>
  <pre><code>  var input = angular.element(value + &quot; input&quot;); 
  </code></pre>
  <p>totally breaks.</p>
  <p>First of all, is doing this sort of a DOM-element-iteration too much of trying to apply a JQuery approach to Angular? Is there a better Angular method of getting what I need, which is the data in the hidden inputs in the form of the array above?</p>
  <p>Secondly, how do you extend element selectors in AngularJS- if you have element <code>a</code>, how do you select for <code>inputs contained within a</code>?</p>
  <h1><a href="http://plnkr.co/edit/9HJHjf4sQoRE46qMB8Ib?p=preview" rel="nofollow noreferrer">Here's a Plunkr</a></h1>