So legen Sie den Standardwert für das Feld fest und deaktivieren andere Felder, wenn der Standardwert in angularjs

Question

ausgewählt ist. Ich habe die folgenden Felder: Land, Bundesland, Stadt, Zentrum.

Der Standardwert für alle Felder ist "Alle".

Ich bin in der Lage, die Felder eins nach dem anderen zu aktivieren, indem Sie den vorherigen Feldwert auswählen.

Aber es berücksichtigt nicht "All" als Wert. Wenn es dann berücksichtigt, wird der Staat aktiviert. Kann mir bitte jemand helfen, wie man den Standardwert "All" auf alle Felder setzt und wenn "All" ausgewählt ist, dann sollten die anderen Felder deaktiviert werden, wobei "All" als Wert zu berücksichtigen ist.

Meine HTML-Seite:

<div class="col-sm-2 sidenav" style="height:850px;"> 
     <div class="well"> 
     <form class="form-row " role="form"> 
     <div class="form-group"> 
      <label class="control-label col-sm-14" for="fName">Country*</label> 
      <select class="form-control" ng-model="model.selectedCountry" name="country" ng-change="GetCountry(model.selectedCountry)"> 
       <!--<option value class selected>ALL</option>--> 
       <option ng-repeat="item in model.countries track by $index" value="{{item}}">{{item}}</option> 
        </select> 
      </div> 
      <div class="form-group"> 
      <label class="control-label col-sm-20" for="fName">State*</label> 
      <select class="form-control" ng-model="model.selectedState" name="state" ng-change="GetState(model.selectedState)" ng-disabled="!model.selectedCountry"> 
       <!--<option value class selected>ALL</option>--> 
       <option ng-repeat="item in model.states track by $index" value="{{item}}">{{item}}</option> 
        </select> 
      </div> 
      <div class="form-group"> 
      <label class="control-label col-sm-20" for="fName">City*</label> 
      <select class="form-control" ng-model="model.selectedCity" name="city" ng-change="GetCity(model.selectedCity)" ng-disabled="!model.selectedState"> 
       <!--<option value class selected>ALL</option>--> 
       <option ng-repeat="item in model.cities track by $index" value="{{item}}">{{item}}</option> 
        </select> 
      </div> 
        <div class="form-group"> 
         <label class="control-label col-sm-20" for="fName">Center*</label> 
         <select class="form-control" ng-model="model.selectedCenter" name="center" ng-change="GetCenter(model.selectedCenter)" ng-disabled="!model.selectedCity"> 
         <!--<option value class selected>ALL</option>--> 
       <option ng-repeat="item in model.centers track by $index" value="{{item}}">{{item}}</option> 
         </select> 
        </div> 
        <div class="form-group"> 
      <label class="control-label col-sm-20" for="fName">Role*</label> 
      <select class="form-control" ng-model="model.selectedRole" name="city" ng-change="GetRole(model.selectedRole)" ng-disabled="!model.selectedCountry"> 
       <!--<option value class selected>ALL</option>--> 
       <option ng-repeat="item in model.roles track by $index" value="{{item}}">{{item}}</option> 
        </select> 
      </div> 
        <div class="form-group"> 
        <button type="submit" href="#" ng-click="HeadCount()" class="btn btn-primary btn-lg" ng-hide="submitButton" ng-disabled="!model.selectedRole">SUBMIT</button> 
        </div> 
      </form> 
     </div> 
    </div> 

Answer 1

Hallo überprüfen Sie diese https://plnkr.co/edit/4Vc5EG7BXKikKGp0EdKe

für Standardauswahl

$scope.CategoryLst = [ 
    { id: '0', name: 'ALL' }, 
    { id: '1', name: 'MD' }, 
    { id: '2', name: 'CRNA' }, 
    ]; 

    $scope.item =$scope.CategoryLst[0] 

HTML

<select ng-model="item" ng-options="i.name for i in CategoryLst" ng-change="citychange()" ></select> 

während Onchange die andere wählen eingereicht deaktiviert Sie basierend auf ID oder Namen überprüfen

$scope.citychange = function() 
    { 
    if($scope.item.id == "0") 
    { 
     $scope.disabledflag = true 
    }; 
    } 

Answer 2

<select class="form-control" ng-model="model.selectedCountry" name="country" ng-change="GetCountry(model.selectedCountry)"> 
      <!--<option value class selected>ALL</option>--> 
      <option ng-repeat="item in model.countries track by $index" value="{{item}}">{{item}}</option> 
       </select> 
     </div> 
     <div class="form-group"> 
     <label class="control-label col-sm-20" for="fName">State*</label> 
     <select class="form-control" ng-model="model.selectedState" name="state" ng-change="GetState(model.selectedState)" ng-disabled="!model.selectedCountry"> 
      <!--<option value class selected>ALL</option>--> 
      <option ng-repeat="item in model.states track by $index" value="{{item}}">{{item}}</option> 
       </select> 
     </div> 

Hier können Sie eine weitere Variable für ng-disabled hinzufügen,

<select class="form-control" ng-model="model.selectedState" name="state" ng-change="GetState(model.selectedState)" ng-disabled="disableState"> 

Und in Ihrem Controller können Sie hinzufügen,

$scope.GetState=function(arg){ 
$scope.disableState=false; 
if(model.selectedCountry=="All"){ 
model.selectedState="All"; 
$scope.disableState=true; 
} 

// Your logic for this function may go here 

} 

Sie benötigen die folgende Zeile an Ihrer Initialisierung Teil in Ihrem Controller hinzuzufügen ..

$scope.disableState=false;