ng-deaktiviert funktioniert nicht in Angular Chosen

Question

Ich habe zwei select Boxen in meinem Projekt. Der erste zeigt Formate und der zweite hat zwei options, nämlich "Ja" und "Nein". Ich habe eckig auf beiden Boxen gewählt.

Anfangs ist die Option "Ja" aus der zweiten Auswahlbox deaktiviert. Ich möchte das option aktivieren, wenn der Benutzer "PDF" als Format aus der ersten select Box auswählt.

Das sind meine Auswahlboxen

//first 
<select name="exporType" id="exporType" ng-model="interactor.parameters.exporType" ng-options="format for format in formatOptions" ng-change="checkDisable();" chosen> 
     <option value=""></option> 
</select> 

//second 
<select name="maskAccountNumber" id="maskAccountNumber" ng-model="interactor.parameters.maskAccountNumber" style="width:145px;" chosen> 
    <option value=""></option> 
    <option value="N">No</option> 
    <option value="Y" ng-disabled="disableoption">Yes</option> 
</select> 

I ng-change auf erste select Box nenne das den "Ja" option ($scope.disableoption) zu true oder false auf der Grundlage ihrer Auswahl

Die Funktion gesetzt würde, ist wie folgt

$scope.checkDisable = function() { 

     console.log("Export type is "+$scope.interactor.parameters.exporType); 
     if($scope.interactor.parameters.exporType == "PDF") 
      $scope.disableoption = false; 
     else 
      $scope.disableoption = true; 
}; 

Die Problem ist, dass wenn ich "PDF" als Option aus dem ersten select Feld die "Ja" option nicht aktualisieren.

Wenn ich chosen aus meinen select Boxen entferne es funktioniert gut, aber nicht mit chosen

EXAMPLE WITH CHOSEN

EXAMPLE WITHOUT CHOSEN

Answer 1

Ich habe auf dieser Seite mehrmals gegen die Verwendung von tatsächlichen <option> geraten worden, Tags, um eine <select> mit Angular zu bauen, weil Sie etwas von der Dynamik verlieren Mic-Power, die der Controller haben kann. In meiner Lösung unten kontrolliere ich vollständig den Zustand beider Auswahlen von der Steuerung. Folgen Sie der Geige für eine funktionierende Demo.

HTML:

<select name="exporType" id="exporType" 
     ng-model="exporType" 
     ng-options="format.value as format.name for format in formatOptions" 
     ng-change="checkDisable()" style="width:145px;"> 
</select> 

<select name="maskAccountNumber" id="maskAccountNumber" 
     ng-model="maskAccountNumber" 
     ng-options="mask.value as mask.name disable when mask.disabled for mask in maskOptions" 
     ng-change="checkDisable()" style="width:145px;"> 
</select> 

Controller:

function MainController($scope) { 
    $scope.disableoption = true; 
    $scope.formatOptions = [{value: "BAI", name: "BAI"}, 
          {value: "CSV", name: "CSV"}, 
          {value: "PDF", name: "PDF"}, 
          {value: "QBO", name: "QBO"}, 
          {value: "QFX", name: "QFX"}, 
          {value: "XLS", name: "XLS"}]; 

    $scope.maskOptions = [{value: "N", name: "No", disabled: false}, 
          {value: "Y", name: "Yes", disabled: true}]; 

    $scope.exporType = "BAI"; 
    $scope.maskAccountNumber = "N"; 

    $scope.checkDisable = function() { 
    if ($scope.exporType == "PDF") { 
     // show the 'Yes' option for PDF 
     $scope.maskOptions[1].disabled = false; 
    } 
    else { 
     // hide the 'Yes' option if not PDF 
     $scope.maskOptions[1].disabled = true; 

     // change the mask to 'No' when switching to anything 
     // other than PDF, since 'Yes' cannot be selected 
     $scope.maskAccountNumber = "N"; 
    } 
}; 

Demo hier

JSFiddle