Angularjs下拉列表由于ng焦点事件而关闭。

Question

我有张安古拉的表格。我有一个表格下拉如下：

   <p ng-show="isCompoValMsgOn">'select component'</p>
    <select ng-focus="onFocusComponent($event)"   id="component" ng-model="component.selected" ng-change="onSelectComponentCode()">
   <option value="">Select Component</option>
   <option ng-repeat="component   in  list value="{{component}}">{{ component.DES }}</option>
   </select>

如果用户在未选择任何组件的情况下单击“保存”按钮，则我将通过设置isCompoValMsgOn=true来显示错误。

$scope.isCompoValMsgOn=true

现在，我希望一旦用户专注于下拉列表，错误信息就应该隐藏起来。为此，我编写了代码：

$scope.onFocusComponent = function ($event) {
        $scope.isCompoValMsgOn = false; 
    }

这是可行的，但却造成了另一个问题。

问题是这样的:当我专注于下拉错误消息时，会立即隐藏，但是下拉列表也会关闭，并且会选择随机选项。

，但我的要求如下:

1. 错误信息应隐藏
2. 不应关闭下拉菜单，让用户选择选项。

Answer 1

这是你的问题：

<option ng-repeat="component in list" value="{{component.DES}}">{{ component.DES }}</option>

缺失引号

Answer 2

我已经找到了解决上述问题的方法，我使用ng单击事件而不是ng焦点event.Here，代码是：

<select ng-click="onFocusComponent()" ng-disabled="!frmValidationParms.IsCepCodeSelected" class="form-control" name="component" id="component" ng-model="component.selected" ng-change="onSelectComponentCode()">
                                <option value="">Select Component</option>
                                <option ng-repeat="component   in component.projectListData.PCAT_OBJ.ARR_PCOM | orderBy:['ORD']" value="{{component}}">{{ component.DES }}</option>
                            </select>