AngularJS - get the value of the selected

Question

I got a problem with ng-model and ng-selected. At the beginning the ng-model is null, and the correct value is selected. So if you submit the form:

{ resolution : undefined, desiredFps : 30 }

And it's incorrect.

So, I want that the model of the <select> take the selected value based on the ng-selected attributes. What is the correct way of updating the selected value and updating the model with the value as well?

<form novalidate name="preferencesForm" 
                 ng-submit="submitPreferencesForm(BEPreferencesForm)"
                 ng-controller="UserPreferencesFormController">
   <label for="resolution">Choose the resolution : </label>
   <br/>
   <select name="resolution" id="resolution"
           ng-model="BEPreferencesForm.resolutionId"
           ng-change="buttonDisabled = False">
      <option value="1" ng-selected="user.screenWidth ==  800 && user.screenHeight == 600">800x600</option>
      <option value="2" ng-selected="user.screenWidth == 1024 && user.screenHeight == 768">1024x768</option>
      <option value="3" ng-selected="user.screenWidth == 1280 && user.screenHeight == 720">1280x720</option>
      <option value="4" ng-selected="user.screenWidth == 1280 && user.screenHeight == 768">1280x768</option>
      <option value="5" ng-selected="user.screenWidth == 1360 && user.screenHeight == 768">1360x768</option>
      <option value="6" ng-selected="user.screenWidth == 1600 && user.screenHeight == 900">1600x900</option>
      <option value="7" ng-selected="user.screenWidth == 1768 && user.screenHeight == 992">1768x992</option>
      <option value="8" ng-selected="user.screenWidth == 1920 && user.screenHeight == 1080">1920x1080</option>
   </select>
</form>

`ng-model` just takes the selected value so `$scope.BEPreferencesForm.resolutionId` contains the selected value — michelem, Jun 29 '15 at 19:41
A better clarification would be, if you select the first option, do you want `BEPreferencesForm.resolutionId` to equal 1 or 800x600? — KreepN, Jun 29 '15 at 19:44

Oleksandr Pyrohov · Accepted Answer · 2018-01-27T12:40:37.767

0

There is an Angular way, you should use ng-options directive. Simplified example:

<select ng-model="BEPreferencesForm.resolutionId"
        ng-options="item.id as item.name for item in items">
</select>

In the controller:

$scope.items = [
    { id: 1, name: '1024x768' },
    { id: 2, name: '1280x768' }
];

// Resolution with id = 2 will be selected by default:
$scope.BEPreferencesForm = {
    resolutionId: 2
};

edited Jan 27 '18 at 12:40

answered Jun 29 '15 at 19:51

Oleksandr Pyrohov

14,685
6
61
90

score 0 · Answer 2 · answered Jun 29 '15 at 19:56

0

You should take a look at the doc : https://docs.angularjs.org/api/ng/directive/select

The ng-model takes the option value when selected. If the screen resolution is 800x600 your BEPreferencesForm.resolutionId will equal 1.

answered Jun 29 '15 at 19:56

ukn

1,723
1
14
24

AngularJS - get the value of the selected for the model

2 Answers2

AngularJS - get the value of the selected