使用數據基於AngularJS來自另一個字段的輸入將選項填充到選擇中

Question

我有一個帶地址的表格。 我要收集的第一個地址字段是一個郵政編碼。 輸入郵政編碼后，一個自定義指令將查詢一個外部API，並獲取一個包含城市，州，縣以及該州所有縣列表的對象。

在郵政編碼字段上，我具有在分配給城市，州和縣輸入字段的模型中傳遞的屬性。 該指令采用這些並填充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
  };
}]);

Answer 1

您甚至可以在沒有可用數據的情況下使用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/