如果前一个字段具有默认值并使用默认值作为选定值,如何禁用所有其他字段

时间:2016-06-27 08:09:30

标签: html angularjs

我是AngularJS的新手。我可以根据之前的字段选择过程禁用字段。

但是我想将默认值设置为" ALL"到所有领域(即国家,州,城市)。

如果国家/地区值=" ALL"那么州,城市价值应该是" ALL"。

我正在使用下面的代码,我使用默认值为null。如何设置默认值并使用默认值作为选定值?

我尝试过搜索网络,但我无法解决问题。

我的控制器:

if (response.json.response.statuscode == 0 && response.json.response.statusmessage =='Success'){
                     var geography = response.json.response.geography;
                     console.log("Geography : "+JSON.stringify(geography));      

                     for(var i=0; i<geography.length; i++){

                    //$scope.model.countries.push("ALL");
                     $scope.model.countries.push( geography[i].countryname);
                     console.log($scope.model.countries);

                         if(($scope.model.countries != [])||($scope.model.countries != null)){


                         for(var j=0; j<$scope.model.countries.length; j++){

                             $scope.model.states = [];
                            //$scope.model.states.push("ALL");
                             $scope.model.states.push(geography[i].state[i].statename);
                            console.log($scope.model.states);

                             if(($scope.model.states != [])||($scope.model.states != null)){
                             for(var k=0; k<$scope.model.states.length; k++){
                                $scope.model.cities = []; $scope.model.cities.push(geography[i].state[i].cities[i].city);
                             console.log($scope.model.cities);

                                 if(($scope.model.cities != [])||($scope.model.cities != null)){

                                     $scope.model.segments = [];
                              var segments = "ALL";

                                $scope.model.segments.push(segments);
                                console.log($scope.model.segments);

                              }
                            }
                        }
                    }
                 }
              }
           }
        });
    }

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

2 个答案:

答案 0 :(得分:0)

一种可能性是初始化控制器中的模型:

$scope.model = {
  selectedCountry: 'ALL',
  selectedState: 'ALL',
  selectedCity: 'ALL'
}

并在html中将ng-disable-Attributes更改为

ng-disabled="model.selectedCountry == 'ALL'"

答案 1 :(得分:0)

<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="ALL" 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 == 'ALL'">
               <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 == 'ALL'"> 
               <option ng-repeat="item in model.cities track by $index" value="{{item}}">{{item}}</option>
                   </select>
          </div>