为什么使用 angularJs 选择选项显示第一个空选项？答案

【问题标题】：Why does select option using angularJs show first empty option?为什么使用 angularJs 选择选项显示第一个空选项？
【发布时间】：2018-02-12 03:12:27
【问题描述】：

当我重新加载页面时，第一个选项始终为空。我希望包含文本 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;
                })
            }
        })

【问题讨论】：

你的代码中的 makeData 是什么？
makeData 是从路由解析属性返回的数据，我正在使用 ngrouter 服务提供者。

标签： javascript html angularjs select option

【解决方案1】：

如果你不打算使用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>

【讨论】：

我正在使用 ng 路由器，并且 makeData 是从 resolve 属性返回的。你为什么要制作自己的物品？它适用于自己创建的对象，但不适用于我猜的动态数据。请查看我的代码并据此提出解决方案。
我很欣赏这一点，但它的工作原理是这样的，并且不适用于动态数据。请尝试并提出解决方案。
如果这很重要，那么它应该在您的原始问题中披露 - 请记住始终创建minimal reproducible example！请使用this plunker 并对其进行修改，以便可以重现该问题。我从$route 文档链接的示例中对其进行了修改，并且必须更新路由脚本文件的 src。
那个答案基本上和我说的完全一样……只是字数更少，没有sn-p示例……

【解决方案2】：

只需删除 ng-init 并在您的模型中提供默认值

   $scope.makeSelected = 0;

这是您的代码Click here的运行小提琴

使用动态数据获取代码Click here

【讨论】：

@Shaur Bin Talib 如果您觉得此答案有用，请将其标记为已解决
还是没有解决我的问题，可以试试$http服务返回的动态数据吗？
$scope.modelData = response.data有什么用；在您的代码中
那是另一回事，从选择下拉列表中选择任何选项时，将调用该函数以从 Web 服务中检索新数据。
用动态数据检查这个小提琴：jsfiddle.net/varunsukheja/hpLys3qk/2