0

私はAngularJSを初めて使用し、複数サイトのビデオを見た後、AngularJSを使用して簡単なWebページを構築することにしました。

ページは最初に ajax リクエストによって設定された 1 つの選択ボックスをロードする必要があります (これにはすべてのデータが含まれます)。次に、選択した値に基づいて、子データを含む新しい選択要素を作成する必要がある場合があります。これは、子 ID を持たないオプションが選択されるまで発生し続けます。API から返されるデータの形式は次のとおりです。

[ { "ChildIds" : [  ],
    "Id" : "1",
    "Name" : "Top Level",
    "ParentId" : null
  },
  { "ChildIds" : [ "51" ],
    "Id" : "22",
    "Name" : "LevelA - 1",
    "ParentId" : "1"
  },
  { "ChildIds" : [ "38",
        "26"
      ],
    "Id" : "24",
    "Name" : "LevelA - 2",
    "ParentId" : "1"
  },
  { "ChildIds" : [  ],
    "Id" : "38",
    "Name" : "LevelB - 1",
    "ParentId" : "24"
  },
  { "ChildIds" : [  ],
    "Id" : "26",
    "Name" : "LevelB - 2",
    "ParentId" : "24"
  },
  { "ChildIds" : [  ],
    "Id" : "51",
    "Name" : "LevelB - 3",
    "ParentId" : "22"
  },
  { "ChildIds" : [ "43",
        "21"
      ],
    "Id" : "36",
    "Name" : "LevelC - 1",
    "ParentId" : "26"
  },
  { "ChildIds" : [  ],
    "Id" : "43",
    "Name" : "LevelD - 1",
    "ParentId" : "36"
  },
  { "ChildIds" : [  ],
    "Id" : "21",
    "Name" : "LevelD -2",
    "ParentId" : "36"
  }
]

ハードコーディングされた選択要素を使用してこれを機能させることができましたが、これを動的にしたいと考えています。

HTML

<div class="container">
        <div ng-controller="organisationalUnitCtrl">
            <select class="form-control" ng-model="root" ng-options="ou.Name for ou in ous | filter:{ParentId:'!'}">
                <option value="">-- choose organisation unit --</option>
            </select>
            <select class="form-control" ng-model="child" ng-options="ou.Name for ou in ous | filter:{ParentId:root.Id}">
                <option value="">-- choose organisation unit --</option>
            </select>
            <select class="form-control" ng-model="child2" ng-options="ou.Name for ou in ous | filter:{ParentId:child.Id}">
                <option value="">-- choose organisation unit --</option>
            </select>
            <select class="form-control" ng-model="child3" ng-options="ou.Name for ou in ous | filter:{ParentId:child2.Id}">
                <option value="">-- choose organisation unit --</option>
            </select>
        </div>
    </div>

コントローラ

bristowRiskApp.controller('organisationalUnitCtrl',
    function organisationalUnitCtrl($scope, organisationalUnitData) {
        $scope.ous = organisationalUnitData.getOrganisationalUnit();
    }
);

サービス

bristowRiskApp.factory('organisationalUnitData', function ($http, $q) {
    return {
        getOrganisationalUnit: function () {
            var deferred = $q.defer();

            $http({ method: 'GET', url: 'http://localhost:53995/api/organisationalunit' }).
                success(function (data, status, headers, config) {
                    deferred.resolve(data);
                }).
                error(function (data, status, headers, config) {
                    deferred.reject(status);
                });

            return deferred.promise;
        }
    }
});

コントローラーで DOM を操作するべきではないことを読みました。では、onChange イベントをリッスンして新しい select 要素を作成する select 要素のディレクティブを作成する必要があると思いますか? どうすればいいですか？私が学ぶことができる例はありますか？

ハード コードされた例で直面するもう 1 つの問題は、select の値を変更すると、次のコンボにのみ波及することです。たとえば、4 つの選択ボックスすべてで値が選択されている場合、2 番目のボックスの値を変更すると、3 番目のボックスは正しくリセットされますが、4 番目のボックスには選択したオプションが含まれたままになります。変化がずっと波及すると思っていました。

ありがとう

スティーブン

4

1 に答える 1