Question

如果我没有从下拉列表中选择值并单击startRecording按钮，则会抛出错误TypeError: Cannot read property 'size' of undefined，如何使用angularJs的ng-change指令解决此问题？

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-if指令需要一个表达式，这意味着如果定义了selectedFileSize，它将为true，并且按钮将显示，如果未定义selectedFileSize（在init上），它将不会出现。

Answer 3

我找到了解决方案：

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

如果没有从ng-options中选择值，如何使用ng-change？

3 个答案: