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 =＆＃39; prof＆＃39;什么

您也可以尝试$ parent.QualificationDetails.qualification_type，而不是How can I get the value of the checked radio button when submitting a form using 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;
                }
            }
        });

通过此example实施。

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

3 个答案: