如何在angularjs的下拉菜单中显示用户输入

我创建了一个带有“其他”选项的下拉菜单，允许用户编写输入，然后单击“添加”按钮将其添加到下拉列表中。 我的问题是，用户输入被添加到下拉菜单中，但没有“选定”选项，“其他”选项仍然是选定的选项，我必须单击菜单来选择用户输入。所以问题是，当用户单击“添加”按钮时，如何使用户输入成为选定选项

这是我的html

<div class="col-sm-7" ng-class="{'has-error':orderWizard.material.$invalid && orderWizard.material.$dirty}">
    <select required id="form-control-1" name="material"
            class="form-control"
            ng-change="model.fetchPrice(); model.fetchRelatedNote('material')"
            ng-model="model.preferenceDTO.material"
            ng-options="material.name for material in model.productPreferences.material"
            data-placeholder="">
       <option ng-repeat="material in model.productPreferences.material">
         {{material.name}}
       </option>
       <option ng-if="model.checkIfCustomizedProduct" value="">
         NEW
       </option>
    </select>

    <div ng-if="model.preferenceDTO.material==material.name">
        <input class="form-control" type="text" 
               placeholder="please add new option"
               ng-model="newMaterial" />

        <div style="padding-top: 5px">
            <div ng-if="!newMaterial ==''">    
                <button type="button" class="btn btn- primary"
                        ng-click="model.addNewOption('material' ,newMaterial)" >
                  add
                </button>
            </div>
        </div>
    </div>
</div>

错误的

function addNewOption(prop, value) {
    model.productPreferences[prop].push({name: value})
    model.preferenceDTO[prop] = {name: value}
}

相反：

function addNewOption(prop, value) {
    var newOption = {name: value};
    model.productPreferences[prop].push(newOption);
    model.preferenceDTO[prop] = newOption;
}

---

第一种情况是使用对象文字创建两个具有不同参考值的新对象。后一种情况仅创建一个新对象，该对象在选择器列表和select元素的ng模型之间共享

代码将选择的

ng选项

类型与选择的

ng重复

选项类型混合在一起。您打算在这两种类型中选择哪一种？有关详细信息，请参阅和。

function addNewOption(prop, value) {
    var newOption = {name: value};
    model.productPreferences[prop].push(newOption);
    model.preferenceDTO[prop] = newOption;
}