AngularJS - 获取模型的选定 <option> 的值答案

【问题标题】：AngularJS - get the value of the selected <option> for the modelAngularJS - 获取模型的选定 <option> 的值
【发布时间】：2015-09-16 09:43:39
【问题描述】：

我遇到了 ng-model 和 ng-selected 的问题。开始时 ng-model 为 null，并选择了正确的值。因此，如果您提交表单：

{ resolution : undefined, desiredFps : 30 }

这是不正确的。

所以，我希望<select> 的模型基于ng-selected 属性采用选定的值。更新所选值并使用该值更新模型的正确方法是什么？

<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>

【问题讨论】：

docs.angularjs.org/api/ng/directive/ngSelected
ng-model 只取选定的值，所以$scope.BEPreferencesForm.resolutionId 包含选定的值
更好的说明是，如果您选择第一个选项，您希望 BEPreferencesForm.resolutionId 等于 1 还是 800x600？
1 当然是value

标签： javascript angularjs angular-ngmodel ng-options angularjs-select

【解决方案1】：

有一个Angular 方式，你应该使用ng-options 指令。简化示例：

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

在控制器中：

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

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

【讨论】：

【解决方案2】：

你应该看看文档：https://docs.angularjs.org/api/ng/directive/select

ng-model 在选择时采用选项值。如果屏幕分辨率为 800x600，您的 BEPreferencesForm.resolutionId 将等于 1。

【讨论】：