Угловой выпадающий список содержит пустую строку над параметрами

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 установлено для одного из регионов (в базе данных или из пользовательского интерфейса), а затем в следующий раз, когда я открою раскрывающееся меню, я вижу пустую строку над всеми опциями.

Я думаю, это связано с некоторой проблемой инициализации, но я новичок в 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-модели