Angular 下拉列表选项上方有一个空行

Question

我有一个包含三个类别的下拉菜单。

<select ng-model="model.RegionId">
   <option value="">---Please Select a Region---</option>
   <option value="1" ng-selected="model.RegionId == '1'">US</option>
   <option value="2" ng-selected="model.RegionId == '2'">Europe</option>
   <option value="3" ng-selected="model.RegionId == '3'">APAC</option>
</select>

如果model.Region的值设置为其中一个区域（在数据库中或来自UI），然后下次打开下拉菜单时，我在所有选项上方看到一个空行。

我想这与某些初始化问题有关，但我对 Angular 真的很陌生，没有太多线索。谁能帮我删除图中所示的空行？提前致谢

Answer 1

让你的选择成为一个对象，比如

 $scope.model = {};
    $scope.model.RegionId = "1";

    $scope.model.countries = [{
      id: "1",
      name: "USA"
    }, {
      id: "2",
      name: "Europe"
    }, {
      id: "3",
      name: "APAC"
    }];
  });

并在 html

<div>
     Targeted Region :
      <select ng-model="model.RegionId" ng-options="country.id as country.name for country in model.countries">
        <option value="">-- please choose Targeted Region --</option>
      </select>
    </div>
    <div>
     Targeted-Id : {{model.RegionId}}
    </div>

通过这种方式，您可以在设置模型值时对其进行检查，如果没有，请选择目标区域 将显示。

此外，不要忘记将 API 中的值分配给 ng-model

Angular 下拉列表选项上方有一个空行

Angular dropdown list has an empty line above options

angularjs

drop-down-menu

angularjs-directive