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

How to use ng-change if value is not selected from ng-options?

本文关键字：何使用 ng-change value 选择 ng-options 如果没有      更新时间：2023-09-26

如果我不从下拉菜单中选择值并单击开始录制按钮，它会抛出错误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 
       } 
}

您没有检查它是否未定义。如果没有选择，则会抛出此错误，除非您将以下代码放入:

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

是，$scope.selectedFileSize。

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，它将为真，按钮将显示，如果没有定义selectedFileSize(在init上)，它将不显示。

我找到了解决方案:

if ($scope.selectedFileSize && $scope.selectedFileSize.size) {
               //logic here 
            }
相关文章：