javascript - 在 Angular 选择特定选项后如何将下拉列表设置为默认值

Question

我有一个包含城市列表的下拉列表(默认选择是 --Select City--)。当用户选择一个城市时，该城市将被添加到某个 div 中。添加后，应将其设置为默认值，即 --Select City--。

有办法实现吗？没有页面重新加载？

Answer 1

试试这个:

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.cities = [
     {"id":1,"name":"Delhi"},
     {"id":2,"name":"Hyderabad"},
     {"id":3,"name":"Pune"}
    ];
    
    $scope.selectedCities = [];
    $scope.setCity = function(city) {
      $scope.selectedCity = "";
      $scope.selectedCities.push(city);
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-model="selectedCity" ng-options="option.name as option.name for option in cities" ng-change="setCity(selectedCity)">
    <option value="">--Select City--</option>
  </select>
  <div ng-repeat="cityName in selectedCities">
   {{cityName}}
  </div>
</div>