ng-optionsから値が選択されていない場合のng-changeの使用方法？

Question

ドロップダウンから値を選択してstartRecordingボタンをクリックしてもエラーTypeError: Cannot read property 'size' of undefinedが発生する場合は、どうやってこの問題をnag-change directivesのangularJsを使って解決できますか？

main.htmlを

<div class="col-md-3"> 
     <select class="form-control" ng-model="selectedFileSize" ng-options="item as item.value for item in FileSizeOptions" ng-change="onSizeChange()"><option value="">Select</option></select> 
    </div> 
<button type="button" class="btn btn-primary" ng-click="startRecording()">Start Recording</button> 

ctrl.js

$scope.FileSizeOptions = [{size: 1, value: "1MB"}, {size: 2, value: "2MB"}, {size: 3, value: "3MB"}, {size: 4, value: "4MB"}, {size: 5, value:"5MB"}]; 

$scope.onSizeChange = function() { 
    $scope.maxMb = $scope.selectedFileSize.size; 
    $scope.maxBytes = 1000 * 1000 * $scope.maxMb; 
    $scope.max = $scope.maxBytes; 
    $scope.FileSizeString = $scope.selectedFileSize.value; 
    console.log('FileSize', $scope.maxMb); 
} 
$scope.startRecording = function() { 
     if ($scope.selectedFileSize.size) { //logic here 
     } 
} 

Answer 1

それが定義されていないか、いない場合はチェックしていません。何も選択されていない場合は、このコードを入れない限り、それは、このエラーがスローされます。

if($scope.selectedFileSize!=undefined){ 
     if ($scope.selectedFileSize.size) { //logic here 
     } 
    } 

Answer 2

あなたがいずれかを選択しなかったので、はい、$ scope.selectedFileSize.sizeは、不定となります。

1、if（$ scope.selectedFileSize）は、ng-model（selectedFileSize）が定義されているかどうかを確認する必要があるためです。

2、いずれかの項目が選択されなくなるまでボタンを無効/非表示にします。 この場合、ボタンでng-ifまたはng-show/ng-hideを使用する必要があります。

<button type="button" class="btn btn-primary" ng-if="selectedFileSize" ng-click="startRecording()">Start Recording</button> 

NG-場合ディレクティブは式を期待し、それがselectedFileSizeが定義されている場合、それは真実であることを意味する、とselectedFileSizeが定義されていない場合、ボタンは、それが表示されません（INIT上）、表示されます。

Answer 3

私は解決策が見つかりました：

if ($scope.selectedFileSize && $scope.selectedFileSize.size) { 
       //logic here 
      }