为什么下拉选择最后一个值

Question

我在这里尝试将数据加载到 dropdownList 中，但为什么默认情况下它 select 列表中的最后一个值。

Html

<div ng-controller="Part5Controller">
    Country : <select ng-model="CountryID" ng-options="I.CountryID as I.CountryName for I in CountryList" ng-change="GetState()">
        <option value="">Select Country</option>
    </select>
</div>

controller.Js

app.controller('Part5Controller', function ($scope, servicemard) {
    getCountrys();
    function getCountrys() {
        var xx = servicemard.getctrys();
        xx.then(function (d) {
            $scope.CountryList = d.data;
        })
    }
})

service.js

app.service('servicemard', function ($http) {
    this.getctrys = function () {
        return $http.get('/Jan/GetCountries')

      }
})

Answer 1

Angular 的 ng-model 保持目标属性的同步值和小部件的状态。在您的情况下，这意味着选择 CountryID 等于您的控制器范围 CountryID 的选项。我没有看到控制器 CountryID 的任何定义，所以我认为你应该尽量明确。

将空选项设置为

<option value="-1">Select Country</option>

并在controller中添加CountryID初始化

$scope.CountryID = -1;

Answer 2

一石二鸟。给 "prompt" 选项一个值会让你不得不处理它。可能更好的方法是预先 select 并禁用它。

<div ng-controller="Part5Controller">
    Country : <select ng-model="CountryID" ng-options="I.CountryID as I.CountryName for I in CountryList" ng-change="GetState()">
        <option value="" selected disabled>Select Country</option>
    </select>
</div>

现在，提示默认为 selected，但不能为绑定实际 selected。我的经验是在没有 selection 的绑定上使用空值会导致列表中的最后一项默认被 selected。

为什么下拉选择最后一个值

Why dropdown selecting last value

angularjs

angular-ngmodel

ng-options