Javascript 将Ctrl中的开关语句缩减为禁用的输入字段（AngularJS）

一般来说，代码语句是有效的，但我想这不是一个好的实践，因为变量在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>

姓氏：
名字：
组：
{{$select.selected.name}

---

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

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

  $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;
                }
            }

---

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

  $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;
                }
            }

---

规则很简单：

• 除非值为1，否则disLname为true
• 除非值为2，否则disFname为true
• 除非值为3，否则disGroup为真
• 除非值为3，否则组为{}

我还添加了检查num不是一个数字，num超出界限

-查看左下窗格的控制台

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 : {};
};

scope.searchDisabled=函数（num）{
var值=parseInt（num，10）；
if（isNaN（num））{
$log.error（'ERR！变量不是num:'，num）；
返回；
}
如果（num<1 | | num>4）{
$log.error（'ERR！变量超出范围：'，num）；
返回；
}
$scope.disLname=value！==1；
$scope.disFname=value！==2；
$scope.disGroup=value！==3；
$scope.group=value==3？未定义：{}；
};

规则非常简单：

• 除非值为1，否则disLname为true
• 除非值为2，否则disFname为true
• 除非值为3，否则disGroup为真
• 除非值为3，否则组为{}

我还添加了检查num不是一个数字，num超出界限

-查看左下窗格的控制台

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 : {};
};

scope.searchDisabled=函数（num）{
var值=parseInt（num，10）；
if（isNaN（num））{
$log.error（'ERR！变量不是num:'，num）；
返回；
}
如果（num<1 | | num>4）{
$log.error（'ERR！变量超出范围：'，num）；
返回；
}
$scope.disLname=value！==1；
$scope.disFname=value！==2；
$scope.disGroup=value！==3；
$scope.group=value==3？未定义：{}；
};

感谢您的回答，但小组失败了。当我选择一个组时，列表将不会过滤所选组的数据。感谢您的回答，但是组失败了。当我选择一个组时，列表将不会过滤所选组的数据。感谢您的回答，但您的解决方案与上面的回答有相同的问题。。一旦我选择了一个组，就不会给出过滤后的数据。谢谢你的回答，但是你的解决方案也有与上面的答案相同的问题。。只要我选择了一个组，就不会给出过滤后的数据。