為什么使用angularJs的select選項顯示第一個空選項？

Question

重新加載頁面時，第一個選項始終為空。 我希望包含文本Any Make的選項成為默認選擇選項。 這是我的看法的代碼：

  <select class="form-control" id="make" name="make" ng-init="Any Make" ng-model="makeSelected" ng-change="makeChanged()">
      <option value="0" selected="selected"> Any Make</option>
      <option ng-repeat="obj in makeData" value="{{obj.make_id}}"> {{ obj.make_name | uppercase }} </option>
  </select>

這是我的控制器代碼：

.controller("homeController", function ($scope, makeData, $http) {

            $scope.makeData = makeData;

            $scope.makeChanged = function () {
                $http({
                    method: "GET",
                    url: "homeService.asmx/GetModelById"})
                    .then(function (response) {
                        $scope.modelData = response.data;
                })
            }
        })

Answer 1

只需刪除ng-init並在模型中提供默認值

   $scope.makeSelected = 0;

這是您的代碼運行的小提琴點擊這里

撥弄具有動態數據的代碼，請單擊此處

Answer 2

如果您不打算使用ngOptions ，那么至少要擺脫該ng-init因為它不是一個函數，在控制器函數中設置$scope.makeSelected = 0 ；

然后，您可以在該初始選項上刪除selected="selected" ，因為angularJS代碼將處理所選內容。

請參見下面的演示：

 angular.module('app', []) .value('makeData', [{ "make_id": 1, "make_name": "cat" },{ "make_id": 2, "make_name": "dog" },{ "make_id": 6, "make_name": "monkey" }]) .controller("homeController", function($scope, makeData, $http) { //initialize the value associated with ng-model on the select list $scope.makeSelected = 0; $scope.makeData = makeData; $scope.makeChanged = function() { console.log('makeChanged'); //$http() request removed because we don't have access outside this domain for AJAX requests. }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="homeController"> <select class="form-control" id="make" name="make" ng-model="makeSelected" ng-change="makeChanged()"> <option value="0"> Any Make</option> <option ng-repeat="obj in makeData" value="{{obj.make_id}}"> {{ obj.make_name | uppercase }} </option> </select> <div>makeSelected: {{makeSelected}}</div> </div>