如果在angularjs中选择了默认值,如何将默认值设置为字段并禁用其他字段

时间:2016-06-24 09:24:30

标签: html angularjs

我有以下字段 - 国家,州,市,中心。

所有字段的默认值为"全部"。

我可以通过选择前一个字段值逐个启用字段。

但它没有考虑" All"作为一种价值。如果它考虑那么状态正在被激活。所以任何人都可以帮助我如何设置默认值为"所有"所有的领域和如果"所有"选中后,其他字段应被禁用,并考虑" All"作为一种价值。

我的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>

2 个答案:

答案 0 :(得分: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>

当onchange禁用其他选择字段时,您可以根据ID或名称

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

答案 1 :(得分: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>

在这里,您可以为ng-disabled添加另一个变量,

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

在您的控制器中,您可以添加

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