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

Question

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

注册.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;
                }
            }
        });

上面的场景是，如果资格类型等于专业 (prof) 下拉列表被禁用，而当它是教育时，下拉列表应该被启用。关于如何实现这一点的任何想法。

这是质量级别 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>