Question

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

这是我的html

%TTT{turns: %{x: MapSet.new, o: MapSet.new}, last_player: :player}

我的controller.js

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

Answer 1

错误

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-model之间共享。

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

1 个答案: