無需請求設置ngMaterial自動完成的值

Question

我正在使用AngularJS和Angular Material。我有幾個級聯autocompletes。但是當我在其中一箇中選擇一個值時，我想設置另一個自動完成的值。所有數據都來自服務器異步。

這是一些代碼。標記：

<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 }; 
...