如何从下拉菜单中选择选项

Question

我有一个输入框，除此之外，我还有图像。 单击图像后，我将在其中打开一个下拉菜单，其中包含一些来自控制器的选项。 如果我从下拉菜单中选择某项，它将在文本框中输入。 这样，我们可以从下拉菜单中插入多个选项，并以逗号分隔。 我可以从下拉菜单到文本框输入单个选择的选项。

我需要帮助的是：

1. 如何多选选项并在文本框中输入
2. 输入时如何避免选择重复选项。

这是我在Angular js中需要做的所有事情。

以下是我的控制器：

              $scope.onDropDdownChange = function (dropdownFieldName, textFiledName,splitSelItem) {
                    let rpInfo = $scope.restrictedPartyInfo;
                    let selItem = rpInfo[dropdownFieldName] ? (splitSelItem ? (rpInfo[dropdownFieldName]).split("-")[0] : rpInfo[dropdownFieldName]) : '';
                    if(rpInfo[textFiledName]) {
                        var isExist = rpInfo[textFiledName].indexOf(selItem);                           
                        if(isExist)
                            rpInfo[textFiledName] += ',' + selItem;                         
                    } else {
                        rpInfo[textFiledName] = selItem;
                    }
                }; 

下面是我的HTML部分：

            <td width="10%" class="gridInfoAddEditTableData">Customer Types*</td>
                <td width="9%" class="gridInfoAddEditTableData">                    
                    <img id="followbutton" ng-src="{{followButtonImg}}" alt="Show Hide"
                    ng-click="ShowHideCusttyp();toggleImageCustTyp()"  ng-model="restrictedPartyInfo.ShowHideCusttyp">
                    <input type="text" id="customertypes" style="width:54%" ng-click="ShowHideCusttyp();"
                    ng-model="restrictedPartyInfo.customerType"
                    ng-keydown="ShowHideCusttyp();"/>
                </td>


          <td align="center" class="gridInfoAddEditTableData">              
                 <select  multiple ng-show = "Visible" name="customerTypess"  ng-change="ShowHideCusttyp();onDropDdownChange('customerTypes','customerType',false);"
                ng-model="restrictedPartyInfo.customerTypes"
                style="position: relative; align: center; top: 1px; left: 245%; width: 150%; height: 65px;"
                ng-init="customerTypess ='val_customerTypess'" >
                    <option ng-repeat="custtyp in customerTypes" value="{{custtyp.clientTypeCode}}">{{custtyp.clientTypeCode}} – {{custtyp.clientDescription}}</option>
                </select>               
            </td>

Answer 1

对于1.使用html的多个标记，您必须使用Ctrl +鼠标单击https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple ，您将获得所选数据的数组，这些数组可以使用逗号显示分隔方式

对于2。在从下拉列表中选择多个数据后，Use可以使用循环。您可以在Selection期间进行限制，例如是否已经在数组中然后进行删除，NG更改可能会帮助删除来自Server的重复数据：）