AngularJS：ngMessages 在 select 中无法使用 ng-options

Question

我看到很少有适用于 ng-repeat 的答案，但使用 ng-options 我遇到了问题。

问题：想要在触摸下拉菜单但未选择任何内容时显示所需的错误消息，我可以使用输入字段执行此操作。

JS 代码

$scope.personMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
}]

HTML

<select  name="inpName"  ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
        <option value=""  selected hidden/> </select>
        <div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
          <div ng-message="required">Required field</div>
            </div>
           </div>

引用了这个ng-repeat solution

Answer 1

由于还没有答案，我发布了我发现的问题。

所以当我使用 ng-options 时，它开始在下拉列表中添加一个额外的行，该行可以是空白的，或者你可以给我 select 之类的东西。

我添加了下面的代码来解决这个问题，在 chrome 它没有显示任何空白行。

<option value=""  selected hidden/> </select>

但是当我在 IE 中尝试时它仍然有一个空白行，所以当我 select 下拉列表中的一个值然后单击空白行时会发生什么 ngMessage 工作 fine.So 如果我在 chrome 中再添加一个空白选项，然后尝试先 select 一些内容，然后单击空白，ngMessage 将按预期工作。

问题是 我期待 <select> to work like the input fields and was trying to use the$touched` 状态。但它不是那样工作的，我在想只要我点击下拉菜单 ngMessage 应该激活，如果我将焦点留在其他字段而不 select 从下拉菜单中输入任何内容。不确定我是否可以通过任何其他方式实现它。

已更新HTML

<select  name="inpName"  ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
        <option value="">Select one </option> </select>
        <div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
          <div ng-message="required">Required field</div>
            </div>
           </div>

AngularJS：ngMessages 在 select 中无法使用 ng-options

AngularJS: ngMessages not working with ng-options in select

angularjs

angularjs-directive

angularjs-ng-repeat

ng-options

ng-messages