Question

我看到很少有适用于ng-repeat的答案，但是对于ng-options我面临着问题。

问题：如果触摸下拉列表并且未选择任何内容，则要显示所需的错误消息，我可以使用输入字段执行此操作。

JS CODE

$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时，它会在下拉列表中添加一个额外的行，这可能是空白的，或者您可以选择像我这样的内容。

我添加了以下代码来解决这个问题，并且在Chrome中它没有显示任何空行。

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

但是当我在IE中尝试时它仍然有一个空白行，那么当我在下拉列表中选择一个值然后再单击空行时ngMessage工作正常。所以如果我再添加一个chrome中的空白选项，然后尝试先选择一些内容，然后单击空白，ngMessage按预期工作。

问题我期待<select> to work like the input fields and was trying to use the $ touch`状态。但它不能像那样工作，我想一旦我点击下拉列表ngMessage应该激活如果我将焦点留给其他字段而不从下拉列表中选择任何内容。不确定我是否可以通过任何其他方式实现。

更新了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

1 个答案: