How can I create an array from the values of DOM elements with AngularJS?

Question

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:

 <div class="loadedFood" ng-model="savedFood">
  <div class="foodItem">
    <input type="hidden" name="[food][61][uid]" value="61" />
    <input type="hidden" name="[food][61][unit]" value="30.00" />
    <input type="hidden" name="[food][61][quantity]" value="4" />
    <input type="hidden" name="[food][61][total]" value="120" />
  </div>
  <div class="foodItem">
    <input type="hidden" name="[food][67][uid]" value="67" />
    <input type="hidden" name="[food][67][unit]" value="7.00" />
    <input type="hidden" name="[food][67][quantity]" value="6" />
    <input type="hidden" name="[food][67][total]" value="42" />
  </div>
 </div>

I want to read these into an array loadedFood with each div fooditem becoming a new array element, containing the names and values of the hidden inputs, like:

[{
 uid : 61,
 unit : 7.00,
 quantity : 6,
 total : 42,
}    {
 uid : 67,
 unit : 3.00,
 quantity : 3,
 total : 42,
}]

I can push the value of each individual input on the page to the array loadedFood like this:

 $scope.savedFood = angular.forEach(angular.element(".foodItem input"), function (value, key) {
 var a = angular.element(value);
     value = a.attr("value");
     console.log(value)
     $scope.loadedFood.push(value);
 });

But obviously that's not what I want. I need to create a new element for each .foodItem, 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

  var input = angular.element(value + " input");

totally breaks.

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?

Secondly, how do you extend element selectors in AngularJS- if you have element a, how do you select for inputs contained within a?

Here's a Plunkr

Also, you should look at your design again. With angular, it shouldn't be necessary to have all those hidden form fields. — Davin Tryon
– Davin Tryon, Commented Nov 7, 2013 at 12:26
It looks to me like you try to do some kind of madness. Why would you pass data to angular using hidden input fields? Is there no way to pass the data directly from the server to angular? — bekite
– bekite, Commented Nov 7, 2013 at 12:26

Maxim Shoustin · Accepted Answer · 2013-11-07 12:39:27Z

2

If you want to make your code work, use directive.

However (I think like bekite and Davin Tryon about to check design again).

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {
    $scope.loadedFood = [];
    $scope.savedFood = function () {
        $scope.savedFoodDirective();
    };
});

fessmodule.$inject = ['$scope'];

fessmodule.directive('joe', function () {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs) {

            var list = elm[0].getElementsByTagName('input');

            angular.forEach(list, function (value, key) {
                var a = angular.element(value);
                a.addClass("ss");
                name = a.attr("name");
                val = a.attr("value");
                var line = {val : val, name : name};

                console.log(line)
                scope.loadedFood.push(line);
            });
        }
    };
});

Demo Fiddle

Output:

[
  {
    "val": "61",
    "name": "[food][61][uid]"
  },
  {
    "val": "30.00",
    "name": "[food][61][unit]"
  },
  {
    "val": "4",
    "name": "[food][61][quantity]"
  },
  {
    "val": "120",
    "name": "[food][61][total]"
  }
]

answered Nov 7, 2013 at 12:39

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

1 Comment

Ila Over a year ago

Thanks for showing HOW to do this in a directive, that is very useful.

Collectives™ on Stack Overflow

How can I create an array from the values of DOM elements with AngularJS?

Here's a Plunkr

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related