2

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

 <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，每个 divfooditem成为一个新的数组元素，包含隐藏输入的名称和值，例如：

[{
 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 中扩展元素选择器——如果你有 element a，你如何选择 for inputs contained within a？

这是一个Plunkr

4

1 回答 1

2

如果你想让你的代码工作，使用指令。

但是（我想像 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]"
  }
]
于 2013-11-07T12:39:27.773 回答