2016-06-24 11 views
1

私は以下のフィールド - 国、州、市、中心を持っています。anglejsでデフォルト値が選択されている場合、フィールドにデフォルト値を設定し、他のフィールドを無効にする方法

すべてのフィールドのデフォルト値は "すべて"です。

前のフィールド値の選択を使用してフィールドを1つずつ有効にできます。

しかし、値として「すべて」は考慮されていません。それが考慮されている場合、状態はアクティブになっています。誰もがすべてのフィールドに "すべて"として既定値を設定する方法を教えてください、 "すべて"が選択されている場合、他のフィールドは値として "すべて"を考慮して無効にする必要があります。

マイHTMLページ:

<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> 
+0

...あなたのコントローラであなたの初期化部分に次の行を追加する必要があり、「すべて」はまた、あなたのドロップダウンリストの右にある値はありますか?次に、ng-disabled = "!model.selectedCountry"はfalseを返します。次のドロップダウンが有効になります。ではない? – Guna

+0

ng-disabledにもう1つのブール変数を使用します。 'ng-change'で呼び出されたメソッドの条件に基づいて、その変数に 'true'または 'false'の値を与える – Guna

+0

もう1つのブール値ng-disable?詳細を説明してください。 –

答えて

1

こんにちはデフォルトの選択のために、このhttps://plnkr.co/edit/4Vc5EG7BXKikKGp0EdKe

をチェック

$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> 

一方、他の、あなたはあなたがNG-障害者のための別の変数を追加することができ、

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

私はすでにデフォルト値= "ALL"を設定していました。しかし、前のフィールド値が "ALL"で、その値 "ALL"を使用する必要がある場合は、フィールドを無効にする方法が必要です。 –

0
<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> 

ここでIDまたは名前に基づいてチェックすることができ提出]を選択

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

コントローラには、追加することができます。

$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 

} 

あなたがここに

$scope.disableState=false; 
+0

州と都市が有効になります。国はそれをすべてとみなし、状態を有効にします。状態は無効にならず、デフォルト値Allを考慮しています –

関連する問題