angularjs 如何让用户输入出现在下拉菜单中

Question

我创建了一个带有 "other" 选项的下拉菜单，使用户能够编写输入，然后单击添加按钮将其添加到下拉列表中。我的问题是用户输入已添加到下拉菜单但没有 "selected" 选项，'other' 选项仍然是选定的选项，我必须单击菜单以选择用户 input.so 问题是当用户点击添加按钮时，如何让用户输入被选中的选项？

这是我的 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>

我的controller.js

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

Answer 1

ERRONEOUS

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;
}

第一种情况，使用对象文字，创建两个具有不同引用值的新对象。后一种情况只创建一个新对象，它在selector 列表和select 元素的ng-model 之间共享。

angularjs 如何让用户输入出现在下拉菜单中

how to make the user input appear in drop down menu in angularjs

angularjs

angularjs-ng-options

angularjs-ng-model

angularjs-select