2

アドレス付きのフォームがあります。私が収集している最初の住所フィールドは郵便番号です。郵便番号が入力されると、カスタム ディレクティブが外部 API にクエリを実行し、市、州、郡、および州内のすべての郡のリストを含むオブジェクトを取得します。

zipcode フィールドでは、City、State、County の入力フィールドに割り当てられたモデルに渡される属性があります。ディレクティブはこれらを取得してscope変数に入力し、それぞれの値が同期されるようにします。

私の問題は郡の選択ボックスにあります。最初に、州内のすべての郡のリストをフィールドに入力する必要があります (ここでも、使用可能なすべてのオプションは API 応答によって提供されます)。フィールドにデータが入力されたら、値を設定する必要があります。

設定は簡単です。できます。利用可能なオプションをフィールドに入力する方法を一生理解できません。

  • このフォームの複数のアドレスに対してこのディレクティブを再利用できるようにする必要があるため、要素 ID は使用できません。
  • 郵便番号が入力されるまで入力するデータがないため、少なくとも私の見解では ng-options を使用できません。

これは私のフォームの小さなスニペットで、郵便番号と郡のフィールドを示しています。

<div class="form--row">
  <div class="form--col5">
    <label class="form--label" for="nbZip">Zip</label>
    <input
      id="nbZip"
      class="form--input"
      type="text"
      ng-model="data.ClientDetails.zip"
      ng-required="data.Client == 'true'"
      blur="update()"
      ziplookup
      zip-city="data.ClientDetails.city"
      zip-state="data.ClientDetails.state"
      zip-county="data.ClientDetails.county"
    >
  </div>

<!-- First Client NB County -->
<div class="form--row">
  <div class="form--col5">
    <label class="form--label" for="nbCounty">County</label>
    <select class="form--input" id="nbCounty" ng-model="data.ClientDetails.county" ng-required="data.Client == 'true'" change="update()">
      <!-- generate county list! -->
    </select>
  </div>
</div>

そして、私のディレクティブ: (ZipCode は、ディレクティブに挿入するカスタム サービスです。)

directives.directive(
'ziplookup',
['ZipCode',
function (ZipCode) {
  var scope
    , element
    , zipData;

  var getZipData = function (event) {
    // When this function is called, `this` is
    // bound to the scope matching the element.
    scope = this;

    // We also get access to the element itself.
    element = $(event.target);

    ZipCode
      // Shoot off our call for the location data,
      // using the value in the `<input>`.
      .getLocationData(element.val())

      // When data is returned, we will set the
      // returned data.
      .then(setZipData)

      // Update the view with the returned data.
      .then(updateCity)
      .then(updateState)
      .then(updateCounty)
  };

  var setZipData = function (data) {
    // This function makes the scope and data
    // accessible from the `update___` functions
    // that follow.

    // We'll set `zipData` to the returned data.
    zipData = data.data;
  };

  var updateCity = function () {
    scope.city = zipData.city;
  };

  var updateState = function () {
    scope.state = zipData.state;
  };

  var updateCounty = function () {
    scope.county = zipData.county;
  };

  var link = function (scope, elem) {
    elem.bind('blur', angular.bind(scope, getZipData));
  };

  return {
    restrict: 'A',
    scope: {
      city: '=zipCity',
      state: '=zipState',
      county: '=zipCounty'
    },
    link: link
  };
}]);
4

1 に答える 1

6

利用可能なデータがなくても使用ng-optionsできます。API 応答を受信したらすぐに正しいモデルを入力する必要があります。

たとえば、API 応答が次のデータを取り込むと仮定します$scope.availableCounties。

$scope.availableCounties = ZipCodeAPI.getCounties(zipCode);

その後、それを使用して次を定義できますng-options。

<select class="form--input" id="nbCounty" change="update()"
        ng-model="data.ClientDetails.county" ng-required="data.Client == 'true'"
        ng-options="county.id as county.name for county in availableCounties">
</select>

$scope.availableCountiesになるため、最初は何も表示さundefinedれませんが、モデルに入力するとすぐに (そしてすべてが正しく配線されていれば)、Angular は自動的にオプションを<select>フィールドに追加します。

この例を確認してください: http://jsfiddle.net/bmleite/tD9B4/

于 2013-02-06T23:25:39.717 に答える