所选选项未突出显示

Question

每当我删除我预选的任何选项时 'Product'。即使它被选中，它也不会突出显示。一个值为“?string:{{lastSelectedOption}} ?”的新选项出现了。

Html

 <select class="mapping-select" id="SelectId" ng-model="table" name="classesList" size="20" >
                <!-- <option value="? string:{{selectedTable}} ?" style="display:none"></option> -->
                <option value="" style="display:none" ></option>
                <option value="Product" ng-click="selectTable('Product', 'Product')" ng-selected="preSelect">Product</option>
                <optgroup style="font-style: normal;" label="Prices">
                            <option value="{{pa.table}}" id="com.jcatalog.product.Prices:{{$index}}" ng-repeat="pa in tableLists.PricesList track by $index" ng-click="selectTable('Prices', 'Price', $index, tableLists.PricesList)">
                                {{pa.table}}({{$index+1}})
                            </option>
                </optgroup>
                <optgroup style="font-style: normal;" label="ProductAttributeValues">
                            <option value="{{pav.table}}" id="com.jcatalog.product.ProductAttributeValue:{{$index}}" ng-repeat="pav in tableLists.ProductAttributeValuesList track by $index" ng-click="selectTable('ProductAttributeValues', 'ProductAttributeValue', $index, tableLists.ProductAttributeValuesList)">
                                {{pav.table}}({{$index+1}})
                            </option>
                    </optgroup>
                    <optgroup style="font-style: normal;" label="ClassificationAssignment">
                            <option value="{{cg.table}}" id="com.jcatalog.product.ClassificationAssignment:{{$index}}" ng-repeat="cg in tableLists.ClassificationAssignmentsList track by $index" ng-click="selectTable('Product2ClassificationGroup', 'ClassificationAssignment', $index, tableLists.ClassificationAssignmentsList)">
                                {{cg.table}}({{$index+1}})
                            </option>
                    </optgroup>
                    <optgroup style="font-style: normal;" label="ProductRelations">
                            <option value="{{pr.table}}" id="com.jcatalog.product.ProductRelations:{{$index}}" ng-repeat="pr in tableLists.ProductRelationsList track by $index" ng-click="selectTable('ProductRelations', 'ProductRelation', $index, tableLists.ProductRelationsList)">
                                {{pr.table}}({{$index+1}})
                            </option>
                    </optgroup>
                    <optgroup style="font-style: normal;" label="ContractedProduct">
                            <option value="{{cp.table}}" id="com.jcatalog.product.ContractedProduct:{{$index}}" ng-repeat="cp in tableLists.ContractedProductList track by $index" ng-click="selectTable('ContractedProduct', 'ContractedProduct',$index, tableLists.ContractedProductList)">
                                {{cp.table}}({{$index+1}})
                            </option>
                    </optgroup>
                </select>

Option Deletion

$scope.selectTable = function (tname, otname, rowNo, list) {
  getTableData(tname, otname);
  $scope.selectedTable = otname;
  $scope.rowId = rowNo+1;
  $scope.selectedTableList = list;
}

$scope.acceptDeletetion = function () {
      var id;
      if($scope.selectedTable != 'Product'){
        if($scope.selectedTable && $scope.rowId){
          id = $scope.rowId;
          $scope.selectedTableList.splice(id-1, 1);
          updateList($scope.selectedTable, id);
            $scope.preSelect = true;
        } 
      } else {
        growl.error("You can't delete Product table");
      } 
    }

任何人都可以帮助我为什么要添加这个新选项，我该如何避免？

Answer 1

一旦我删除了下拉列表中的 ng-model="table" 指令，错误就消失了。

I think the problem accrued for the model name table value is undefined in loading time, so it takes a object and also it sets a default value for your dropdown,So you got a white space**(you can see the undefined value in rendered html code, see the below image)** . that is a issue. good luck .

所选选项未突出显示

Selected option is not highlighted

html

select

angularjs