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>

对于Group字段，我正在使用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为true
除非值为2
除非值为3
group is {}除非value为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中的switch语句减少为禁用的输入字段（AngularJS）

2 个答案: