Javascript ngMaterial自动完成的设置值，无需请求

我正在使用AngularJS和角材质。我有几个级联自动完成。但是当我在其中一个中选择一个值时，我想设置另一个自动完成的值。所有数据都异步来自服务器

这里有一些代码。标记：

 <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>

---

所以当我选择一个贸易中心时，我想指定一个城市，如果它有。当时的城市列表还没有加载。有解决办法吗？提前谢谢

我明白了。需要将

md selected item

属性添加到

md autocomplete

标记，然后在JS中可以设置该变量的值。最终标记和JS如下所示。 HTML:

$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(", ");
        };

<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>

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