为什么我的默认选项会从我的选择中消失？

Question

Plunkr: https://plnkr.co/edit/ubAPmJoMQaKBLvWSsmTv?p=preview

---

In my app when I first toggle open this dropdown:

After closing and reopening the dropdown:

---

My markup: I have my ng-init="vh.loadedViews[0].description" setup, not sure why this changed :(

<section class="saved-views-modal" ng-show="vh.loadSavedModal">
    <header><h1>Select a saved view</h1></header>

    <div class="select-style">
        <select name="select"
                ng-init="vh.loadedViews[0].description"
                ng-show="vh.viewsAvaliable"
                ng-model="vh.description"
                ng-change="vh.chooseView(vh.description)">
                <option ng-repeat="view in vh.loadedViews"
                        ng-init="vh.description=vh.loadedViews[0].description"
                        value="{{ view.description }}">{{ view.description }}</option>
         </select>

         <select ng-hide="vh.viewsAvaliable" name="select">
            <option selected="selected" value="No saved views">No saved views</option>
         </select>
     </div>

    <button class="btn-green" ng-click="vh.loadView()">Load View</button>
    <button class="btn-green" ng-click="vh.deleteView()">Delete View</button>
</section>

---

I just noticed there is this error inside of the markup ?undefined:undefined ?

Answer 1

You have to provide ng-init in select instead of option

Like this

  <select name="select" ng-init="description=loadedViews[0].description" ng-model="description" ng-change="chooseView()">
    <option ng-repeat="view in loadedViews" value="{{ view.description }}">{{ view.description }}</option>
  </select>

DEMO

But it's better to use ngOptions

Like this

  <select name="select" ng-init="description=loadedViews[0].description" ng-model="description" ng-options="view.description as view.description for view in loadedViews" ng-change="chooseView()">
  </select>

DEMO