Question

问题1：（仅在Firefox上出现，其他浏览器的结果会有所不同）

浏览器中的每次刷新都会导致一个空选项显示为默认选项。我该如何解决这个问题？

问题2：（发生在所有浏览器中）

我想要的是让函数将其设置为默认值。但是会发生什么呢？它设置了＆＃34; City＆＃34;正确地为0，但它显示一个空选项作为默认选项。出现这种情况的原因是什么？

*注意：尝试使用不同的AngularJS版本，我根据AngularJS版本找到了更改

最终结果通缉：将选项更改为＆＃34; ---城市---＆＃34;单击按钮，列表中没有随机的空选项。

＆＃13;

angular.module("MyApp", []).controller("MyCtrl", function($scope) {
  $scope.CityChange = function() {
    $scope.City = 0;
  };
});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
</head>

<body ng-app="MyApp" ng-controller="MyCtrl">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>

  <label>City</label>
  <select ng-model="City" ng-init="City='0'">
            <option value="0">---City---</option>
            <option value="1">City 1</option>
            <option value="2">City 2</option>
        </select><br><br> {{City}}
  <br><br>
  <button ng-click="CityChange()">Change City</button>

</body>

</html>

＆＃13;

Answer 1

您必须使用$scope.City ="0";。您在代码中指定了一个整数。

angular.module("MyApp", []).controller("MyCtrl", function($scope) {
    $scope.CityChange = function() {
        $scope.City = 0;
    };

    //init
    function init(){
        $scope.City=0
    };
    init();
});

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script src="script.js"></script>

    <label>City</label>
    <select ng-model="City">
        <option ng-value="0" disabled="disabled">---City---</option>
        <option ng-value="1">City 1</option>
        <option ng-value="2">City 2</option>
    </select><br><br>    
    {{City}}<br><br>   
    <button ng-click="CityChange()">Change City</button>

</body>
</html>

AngularJS使用Ng-Model时选择空选项

1 个答案: