AngularJS 错误？答案

【问题标题】：AngularJS bugs?AngularJS 错误？
【发布时间】：2014-04-01 11:41:47
【问题描述】：

我正在使用 AngularJS v1.2.15、Google Chrome 版本 33.0.1750.152、Firefox 版本 26.0 开发 Web 应用程序。

我发现的问题：

1.当我通过键盘在选择标签中选择 ng-options 时，模型会更新，但 ng-model 会在前两次单击时写入第一个值。使用鼠标工作正常。在谷歌浏览器中发现了这个问题。在 Firefox 中一切正常。示例：plunker

<div class="controls">
     <select id="model" ng-model="safe.model.id"
             ng-options="model.id as model.name for model in models" required>
     </select>
</div>

2.在谷歌浏览器中样式不适用于输入元素（引导输入样式和角度无效类样式）。我拍了一些截图。

谷歌浏览器：

火狐：

还有其他人有这些问题吗？或者我做错了什么。

【问题讨论】：

问题1：当您说ng-options 不起作用时，您的意思是使用键盘上下选择选项不会更新模型？问题 2：样式问题与 AngularJS 有什么关系？
我编辑了我的问题。
问题 1 - 我无法理解这个问题。您可以为您的问题创建一个小 plunkr 或小提琴。问题 2 - 您能否粘贴代码以便我们知道做错了什么 - 图片仅说明 chrome 中的行为与 Firefox 中的行为不同 - 要了解原因，我们需要查看代码跨度>
1 个问题：plnkr.co/edit/CJPi4gyLeTctzn4dkuST。
Bug 只能从谷歌浏览器中看到。因为，当我在 Firefox 上测试 plunker 示例时，只有在按下选项卡按钮后数据才会写入 ng-model 并且一切正常......并且在 Google Chrome 中，选项值在每次更改选择选项后写入 ng-model 并且我得到错误。我希望有人能看到它:)

标签： angularjs google-chrome firefox

【解决方案1】：

对于问题 #1，我认为这是一个错误。此处已报道：https://github.com/angular/angular.js/issues/4836

但似乎有一个替代方案 - 如果您指定一个带有空值的选项，那么它会修复它。

因此，您只需添加 <option value="">Select one</option> 即可。

这是一个修改后的plunkr 显示它。

您能否发布第二期的代码，以便我们找出问题所在？只是图像没有帮助。

【讨论】：

谢谢。这是解决方案之一。至于第二个问题，Firefox 中所需输入的边框是红色的，但在 Google Chrome 中，输入的风格很简单，没有红色边框。我使用 Bootstrap 3 进行样式设置。要查看样式之间的差异，您可以在屏幕截图中查看。代码在 Plunker 上（链接在我的问题中）。
您可以为该问题创建一个新问题吗？还要提一下在 Firefox 中获取红色边框的步骤
感谢您的帮助，但我会尝试自己解决第二个问题:)

【解决方案2】：

据我所知 - ng-options 或带有 angular 的 select 元素没有任何（键盘）问题，这可能意味着它没有按照您的预期做。我根据您提供的代码松散地创建了一个小提琴。以下是我的控制器：

app.controller('Test', function ($scope) {
  $scope.models = [{id: 0, name: 'abc'}, {id: 1, name: 'def'}, {id: 2, name: 'ghi'}, {id: 3, name: 'jkl'}];

  // safe has to be defined
  $scope.safe = {model: $scope.models[2]};
});

对于select 元素，我从你所拥有的开始，但稍微简化了一点：

  <select id="model" ng-model="safe.model"
          ng-options="model.name for model in models"
          required=""></select>

如果你看看 plunker，it is working here。请注意，我在 Chrome 版本 33.0.1750.154 m 中编写并测试了它。我添加了一个焦点按钮，以便您可以测试键盘输入（否则很难专注于选择）。

至于样式 - 默认情况下，chrome 中的 select 框看起来确实不同，但我无法从您的屏幕截图中看出您认为这里的确切问题。希望这至少有助于解决您的部分顾虑。

【讨论】：

【解决方案3】：

我制作了显示问题 №1 的视频。

Google Chrome example, Firefox example

【讨论】：

【解决方案4】：

我在其他帖子中回答了这个问题，但基本上正如其他人所说，您可以： 1）添加一个空选项 2) 强制选择列表中的一个成员。

Bellow 我有两个解决方案和 jsfiddle 的问题。 Select options through ng-click is not working in chrome browser using AngularJS

对我来说，这个错误是 Chrome 上的错误，而不是角度错误，因为在 firefox 中有效（当它失去焦点时会更新模型）。

【讨论】：