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

Question

我正在将 AngularJS 与 Angular Material 结合使用。我有几个级联自动完成功能。但是，当我在其中一个中选择一个值时，我想设置另一个自动完成的值。所有数据均异步来自服务器。

这是一些代码。标记:

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