0

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

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

我的控制器.js

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

1 回答 1

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

第一种情况，使用对象字面量，创建两个具有不同引用值的新对象。后一种情况只创建一个新对象，该对象在选择器列表和选择元素的 ng-model 之间共享。

于 2018-07-14T21:52:43.277 回答