CODEWITHSUNDEEP
angularjsgoogle-chromefirefox
Alexander Kuzmenko
Alexander Kuzmenko

Reputation: 539

AngularJS bugs?

I am developing web application with AngularJS v1.2.15, Google Chrome Version 33.0.1750.152, Firefox version 26.0.

Problems that I found:

1.When I choose ng-options in select tags via keyboard, model updates, but to the ng-model writes first value the first two clicks. Using the mouse works fine. This problem found in Google Chrome. In Firefox all works good. Example: 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.In Google Chrome styles are not working for input elements (bootstrap input style and angular invalid class style). I took some screenshots.

Google Chrome: googleChromeScreen

Firefox: firefoxScreen

Does anyone else have these issues? Or maybe I'm doing something wrong.

Upvotes: 2

Views: 2952

Answers (4)

Filipe Cotrim Melo
Filipe Cotrim Melo

Reputation: 121

I anwsered this question at other post, but basically as others said, you can: 1) Add a empty option 2) Force to select a member of the list.

Bellow I have the two solutions and the problem at jsfiddle too. Select options through ng-click is not working in chrome browser using AngularJS

For me this error is a bug on Chrome, not angular, because in firefox worked(when it loses the focus updates the model).

:)

Upvotes: 0

Alexander Kuzmenko
Alexander Kuzmenko

Reputation: 539

I created videos that show issue №1.

Google Chrome example, Firefox example

Upvotes: 0

callmekatootie
callmekatootie

Reputation: 11228

For issue #1, I think its a bug. It's been reported here: https://github.com/angular/angular.js/issues/4836

There seems to be an alternative though - if you specify an option with a null value, then it fixes it.

So, you can just add <option value="">Select one</option> and it works.

Here's a modified plunkr that shows it.

Can you post code for second issue so that we can figure out what is wrong with it? Just images are not helping.

Upvotes: 3

drew_w
drew_w

Reputation: 10430

As far as I know - there aren't any (keyboard) issues with ng-options or the select element with angular which probably means that it just isn't doing what you expect it to do. I have created a fiddle loosely based on the code you provided. The following is my controller:

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]};
});

For the select element, I started with what you had but simplified it a little bit:

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

If you take a look at plunker, it is working here. Note that I wrote and tested this in Chrome Version 33.0.1750.154 m. I added a focus button so you can test keyboard input (it is hard to focus on the select otherwise).

As to the styling - by default the select box in chrome does look different but I can't tell from your screen shots what you consider to be the exact issue here. Hopefully this at least helps with part of your concerns.

Upvotes: 2

Related Questions