リクエストなしでngMaterialオートコンプリートの値を設定します

Question

角度のある材質でAngularJSを使用しています。私は複数のカスケードオートコンプリートを持っています。しかし、その中の1つの値を選択すると、別のオートコンプリートの値を設定したいと思います。すべてのデータはサーバーから非同期に送られます。

ここにいくつかのコードがあります。マークアップ：

<md-autocomplete md-input-name="cityInput" 
    md-min-length="3" 
    md-search-text="searchCity" 
    md-items="item in getCities(searchCity)" 
    md-item-text="item.Name" 
    md-selected-item-change="selectedCity(item)" 
    placeholder="Search..." 
    required> 
     <md-item-template> 
     <span>{{item.Name}}</span> 
     </md-item-template> 
     <md-not-found> 
     Nothing found 
     </md-not-found> 
    </md-autocomplete> 

<md-autocomplete md-input-name="tradeCenterInput" 
    md-min-length="3" 
    md-search-text="searchTradeCenter" 
    md-items="item in getTradeCenters(searchTradeCenter)" 
    md-item-text="item.Name" 
    md-selected-item-change="selectedTradeCenter(item)" 
    placeholder="Search..." 
    md-no-cache="true" 
    required> 
     <md-item-template> 
     <span>{{item.Name}}</span> 
     </md-item-template> 
     <md-not-found> 
     Nothing found 
     </md-not-found> 
</md-autocomplete> 

そしてここでは、いくつかのJSはそのためだ。私は貿易センターを選択したときに

$scope.searchUrlTradeCenter = globalSettings.apiServiceBaseUri + "/dir/searchTradeCenter/"; 
     $scope.getTradeCenters = function (searchText) { 
      var url = $scope.searchUrlTradeCenter + searchText + "/" + ($scope.merchantPostalAddress.CityId != null ? $scope.merchantPostalAddress.CityId : 'NULL'); 
      return $http.get(url, { 
       withCredentials: true 
      }) 
      .then(function (response) { 
       return response.data; 
      }); 
     } 

$scope.searchUrlCity = globalSettings.apiServiceBaseUri + "/dir/searchCity/"; 
     $scope.getCities = function (searchText) { 
      var url = $scope.searchUrlCity + ($scope.postalAddressComplete[0] != null ? $scope.postalAddressComplete[0] : 'NULL') + "/" + ($scope.postalAddressComplete[1] != null ? $scope.postalAddressComplete[1] : 'NULL') + "/" + searchText; 
      return $http.get(url, { 
       withCredentials: true 
      }) 
      .then(function (response) { 
       return response.data; 
      }); 
     } 

$scope.selectedTradeCenter = function (tradeCenter) { 
      if (tradeCenter) { 
       $scope.merchant.TradeCenterId = tradeCenter.DirectoryId; 
       if (tradeCenter.Address.City != null) { 
        $scope.selectedCity({ Name: tradeCenter.Address.City.Name, DirectoryId: tradeCenter.Address.City.CityId.toString() }); 
       } 
      } 
      else { 
       $scope.merchant.TradeCenterId = null; 
      } 
     }; 

$scope.selectedCity = function (city) { 
      if (city) { 
       $scope.merchantPostalAddress.CityId = city.DirectoryId; 
       $scope.postalAddressComplete[2] = city.Name; 
      } 
      else { 
       $scope.postalAddressComplete.splice(2, 1, undefined); 
       $scope.merchantPostalAddress.CityId = null; 
      } 

      $scope.CompleteAddresses = $.grep($scope.postalAddressComplete, Boolean).join(", "); 
     }; 

だから、私はそれを持っている場合は、都市を指定します。その時の都市リストはまだロードされていません。そのための回避策はありますか？前もって感謝します！

Answer 1

私はそれを理解しました。 md-selected-item属性をmd-autocompleteタグに追加する必要があり、JSでその変数の値を設定することができます。最終的なマークアップとJSは以下の通りです。 HTML：

<md-autocomplete md-input-name="cityInput" 
    md-min-length="3" 
    md-search-text="searchCity" 
    md-items="item in getCities(searchCity)" 
    md-item-text="item.Name" 
    md-selected-item="selectedCityItem" 
    md-selected-item-change="selectedCity(item)" 
    placeholder="Search..." 
    required> 
     <md-item-template> 
     <span>{{item.Name}}</span> 
     </md-item-template> 
     <md-not-found> 
     Nothing found 
     </md-not-found> 
    </md-autocomplete> 

はJavaScript：

... 
$scope.selectedCityItem = { Name: data.City.Name, Id: data.City.CityId }; 
...