AngularJS - 获取模型选择的 <option> 的值

Question

我遇到了 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>

Answer 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
};

Answer 2

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

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