如何使用带有angularjs的单选按钮启用禁用选择下拉列表？

Question

我一直在互联网上搜寻有关如何使用单选按钮启用或禁用此下拉列表的信息，特别是当单选按钮的值等于prof时，应该禁用下拉列表，但没有帮助。 我确实提出了一个例子，但是没有用。 任何帮助，将不胜感激。

registration.html

<div class="form-group">
    <label class="col-lg-2 col-md-3 control-label">Qualification</label>
        <div class="col-lg-10 col-md-9">
            <div class="radio-custom radio-inline">
                <input type="radio" ng-model="QualificationDetails.qualification_type" value="edu" name="radio1" id="radio4">
                    <label for="radio4">Educational</label>
            </div>
            <div class="radio-custom radio-inline">
                <input type="radio" ng-model="QualificationDetails.qualification_type" value="prof" name="radio1" id="radio5">
                    <label for="radio5">professional</label>
            </div>
        </div>
</div>

//这是我需要修改的下拉列表

<div class="form-group">
    <label class="col-sm-2 control-label" for="Qulitype">Qualification type</label>
        <div class="col-sm-10">

            <select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type == 'prof'" ng-model="QualificationDetails.qualification" class="form-control">
                <option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
            </select>
        </div>
</div>

这是我为在上述场景下工作而实现的代码。 但是没有用:(

regController.js

$scope.$watch('QualificationDetails.qualicication_type', function (QualiType) {
            if (angular.isUndefined($scope.QualificationDetails)) {
                return;
            }
            if (QualiType === 'prof') {
                $scope.QualificationDetails.qualification_type = $scope.QualiType;
            }
            else {
                if ($scope.QualificationDetails.qualification_type !== null) {
                    $scope.QualiType = $scope.QualificationDetails.qualification_type;
                    $scope.QualificationDetails.qualification_type = null;
                }
            }
        });

上面的场景是，对于资格认证，如果资格类型等于专业（教授）的下拉列表被禁用，而对于教育而言，则应启用下拉列表。 关于如何实现这一目标的任何想法。

这是质量级别json。 我通过qualitylevel.service获得它。

(function initController() {

    deptService.getdepts(function (res) {
        $scope.depts = JSON.parse(res.data);

    });

    qualiService.getquali(function (res) {
        console.log("inside ");
        $scope.qualiLevel = JSON.parse(res.data);
    });

    console.log("inside service");

})();

Answer 1

在我看来，无需添加观察者，您的代码就可以正常工作。 我希望我正确地理解了你想要什么。 试试以下代码片段：

 angular .module('app', []) .controller('Ctrl', function($scope) { $scope.qualiLevel = [ {quali_level: 'A', qualification_id: 1}, {quali_level: 'B', qualification_id: 2} ]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <div ng-app="app"> <div ng-controller="Ctrl"> <div class="form-group"> <label class="col-lg-2 col-md-3 control-label">Qualification</label> <div class="col-lg-10 col-md-9"> <div class="radio-custom radio-inline"> <input type="radio" ng-model="QualificationDetails.qualification_type" value="edu" name="radio1" id="radio4"> <label for="radio4">Educational</label> </div> <div class="radio-custom radio-inline"> <input type="radio" ng-model="QualificationDetails.qualification_type" value="prof" name="radio1" id="radio5"> <label for="radio5">professional</label> </div> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="Qulitype">Qualification type</label> <div class="col-sm-10"> <select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type == 'prof'" ng-model="QualificationDetails.qualification" class="form-control"> <option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option> </select> </div> </div> </div> </div> 

Answer 2

由于控件是单选按钮，因此您的QualificationDetails.qualification_type值将设置为1或0，而不是标签值。 两个单选按钮必须具有不同的变量。 根据其值，您必须设置QualificationDetails.qualification_type ='prof'之类的

您也可以尝试使用$ parent.QualificationDetails.qualification_type，而不是使用angularjs提交表单时如何获取选中的单选按钮的值？

Answer 3

谢谢大家的帮助。 只是想表明我正确地实现了它，而其他程序员则增加了他们的知识。 使用$ watch暂时隐藏下拉列表详细信息）。

registrationController.js

$scope.$watch('QualificationDetails.qualification_type', function (Val) {
            if (angular.isUndefined($scope.QualificationDetails))
                return;

            if (Val !== 'prof') {
                $scope.QualificationDetails.qualification = $scope.tempValue;
            }
            else {
                if ($scope.QualificationDetails.qualification !== null) {
                    $scope.tempValue = $scope.QualificationDetails.qualification;
                    $scope.QualificationDetails.qualification = null;
                }
            }
        }); 

通过此示例实现。