Here's a Plunkr

Question

我在页面上有许多隐藏的输入字段。我想将这些输入字段的值读入数组。输入字段具有以下结构：

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

我想将这些读入数组loadedFood，每个div fooditem成为一个新的数组元素，包含隐藏输入的名称和值，如：

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

我可以将页面上每个输入的值推送到数组loadedFood，如下所示：

 $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);
 });

但很明显，这不是我想要的。我需要为每个.foodItem创建一个新元素，然后在其中添加每个输入的名称和值，然后将整个元素推送到loadedFood。我一直坚持DOM元素选择器如何在AngularJS中工作的基本问题 - 尝试做类似JQueryish的事情

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

完全打破了。

首先，正在尝试将这种类型的DOM元素迭代过多地尝试将JQuery方法应用于Angular？是否有更好的Angular方法来获取我需要的东西，这是上面数组形式的隐藏输入中的数据？

其次，如何在AngularJS中扩展元素选择器 - 如果你有元素a，你如何选择inputs contained within a？

Here's a Plunkr

Answer 1

如果您想使代码正常工作，请使用指令。

然而（我觉得像bekite和Davin Tryon一样要再次检查设计）。

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);
            });
        }
    };
});

演示 Fiddle

输出：

[
  {
    "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]"
  }
]

如何使用AngularJS从DOM元素的值创建数组？

Here's a Plunkr

1 个答案: