角度下拉列表在选项上方有一个空行

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