减少 Ctrl 中的开关语句以禁用输入字段 (AngularJS)

Question

代码语句通常有效，但我想这不是一个好的做法，因为变量在 switch 语句的每种情况下都会重复。所以我不知道如何减少代码或者是否有替代方法来切换？

首先Ctrl中的代码：

$scope.searchDisabled = function (num) {
                switch (num) {
                    case 1:
                        $scope.disLname = false;
                        $scope.disFname = true;
                        $scope.disGroup = true;
                        $scope.group = {};
                        break;
                    case 2:
                        $scope.disLname = true;
                        $scope.disFname = false;
                        $scope.disGroup = true;
                        $scope.group = {};
                        break;
                    case 3:
                        $scope.disLname = true;
                        $scope.disFname = true;
                        $scope.disGroup = false;
                        break;
                    case 4:
                        $scope.disLname = true;
                        $scope.disFname = true;
                        $scope.disGroup = true;
                        $scope.group = {};
                        break;
                    default:
                        $log.error('ERR! variable isn\'t a num:', num);
                        break;
                }
            }
        };

最后是我的观点：

<form class="form-horizontal" name="searchForm">
                <div class="form-group form-group-sm">
                    <label class="col-sm-3 control-label">Lastname:</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" placeholder="Search lastname" name="Lname" ng-model="search.lname" ng-click="searchDisabled(1)" ng-disabled="disLname" />
                    </div>
                    <div class="col-sm-1">
                        <input type="radio" class="radio" name="checked" ng-click="searchDisabled(1)" ng-model="formRadio.checked" value="1" ng-hide="!disLname" />
                    </div><!--end radio btn -->
                </div>
                <div class="form-group form-group-sm">
                    <label class="col-sm-3 control-label">Firstname:</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" placeholder="Search firstname" name="Fname" ng-model="search.fname" ng-click="searchDisabled(2)" ng-disabled="disFname" />
                    </div>
                    <div class="col-sm-1">
                        <input type="radio" class="radio" name="checked" ng-click="searchDisabled(2)" ng-model="formRadio.checked" value="2" ng-hide="!disFname"  />
                    </div><!--end radio btn -->
                </div>   
               <div class="form-group form-group-sm">
                <label class="col-sm-3 control-label">Group:</label>
                <div class="col-sm-8">
                    <ui-select ng-model="group.selected" theme="selectize" ng-click="searchDisabled(3)" ng-disabled="disGroup">
                        <ui-select-match placeholder="Choose a group">
                            {{$select.selected.name}}
                        </ui-select-match>
                        <ui-select-choices repeat="group in groups | filter: $select.search">
                            <span ng-bind-html="group.name | highlight: $select.search"></span>
                            <small ng-bind-html="group.code | highlight: $select.search"></small>
                        </ui-select-choices>
                    </ui-select>
                </div><!--end select group -->
                <div class="col-sm-1">
                    <input type="radio" class="radio" name="checked" ng-click="searchDisabled(3)" ng-model="formRadio.checked" value="3" ng-hide="!disGroup" />
                </div><!--end radio btn -->
            </div>

对于组字段，我使用的是 angularjs 的 ui-select 模块。但是我的问题是如何减少或替换 switch 语句？

Answer 1

您可以简单地执行以下操作

  $scope.searchDisabled = function (num) {
                        $scope.disLname = true;
                        $scope.disFname = true;
                        $scope.disGroup = true;
                        $scope.group = {};

                switch (num) {
                    case 1:
                        $scope.disLname = false;
                        break;
                    case 2:
                        $scope.disFname = false;
                        break;
                    case 3:
                        $scope.disGroup = false;
                        break;
                    case 4:
                        break;
                    default:
                        $log.error('ERR! variable isn\'t a num:', num);
                        break;
                }
            }

Answer 2

规则很简单：

disLname 为真，除非值为 1
disFname 为真，除非值为 2
disGroup 为真，除非值为 3
组是 {} 除非值是 3

我还添加了对 num 不是数字以及 num 越界的检查。

Demo - 查看左下方窗格的控制台。

scope.searchDisabled = function (num) {
    var value = parseInt(num, 10);

    if(isNaN(num)) {
        $log.error('ERR! variable isn\'t a num:', num);
        return;
    }

    if(num < 1 || num > 4) {
        $log.error('ERR! variable is out of range:', num);
        return;
    }

    $scope.disLname = value !== 1;
    $scope.disFname = value !== 2;
    $scope.disGroup = value !== 3;
    $scope.group = value === 3 ? undefined : {};
};

减少 Ctrl 中的开关语句以禁用输入字段 (AngularJS)

Reducing switch-statement in Ctrl to disabled input field (AngularJS)

javascript

angularjs

angularjs-scope

angularjs-controller