如何使用带有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 =“教授”什么的

您也可以尝试$ 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实现。