代码之家 › 专栏 › 技术社区 › NeverGiveUp161

AngularJS:ngMessages无法使用select中的ng选项

ng-messages ng-options angularjs-ng-repeat angularjs-directive angularjs

-1

NeverGiveUp161 · 技术社区 · 7 年前

我已经看到了一些对ng repeat有效的答案,但对于ng选项,我面临着问题。

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

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

1 回复 | 直到 7 年前

NeverGiveUp161 7 年前

由于还没有答案,我正在发布我发现的问题。

所以当我使用 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 $touched`状态。但它并不是这样工作的,我在想,只要我点击下拉菜单,如果我把焦点放在其他字段,而不从下拉菜单中选择任何内容,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>

推荐文章

SK-USA · 无法从ng下拉菜单multiselect指令调用控制器函数

7 年前

Junaid Farooq · 无法使用AngularJs在数字“1”上创建属性“subjects”

7 年前

Neel · 如何在事件广播的超时延迟内停止间隔?

7 年前

BlockchainProgrammer · AngularJS将数据从控制器读取到表

7 年前

mBo · 跟踪窗口上的元素宽度调整角度JS

7 年前

Devin Fields · 有条件删除其他指令的指令

7 年前

Scrumptious · 未知提供程序:serviceProvider->service->myDirective

7 年前

NeverGiveUp161 · AngularJS:ngMessages无法使用select中的ng选项

7 年前

dragonfly · 仅当存在内容时显示弹出窗口

7 年前

NeverGiveUp161 · AngularJs将模型值+模型名称传递给控制器中的函数

7 年前