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 要素の反復を行うことは、Angular に JQuery アプローチを適用しようとするのはやりすぎですか? 上記の配列の形式の非表示入力のデータである、必要なものを取得するためのより良い Angular メソッドはありますか?

次に、AngularJS で要素セレクターをどのように拡張しますか? element がある場合a、どのように選択し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 に答える