How to disable all other fields if previous field is having default and using default value as selected value

Question

I am new to AngularJS. I am able to disable the fields based on previous field selection process.

But I want to set the default value as "ALL" to all the fields (i.e., country, state, city).

If country value = "ALL" then state, city value should be "ALL".

I am using below code and I am using default value as null. How to set default value and use default value as selected value?

I tried through searching the web but yet I can't solve the issue.

My Controller :

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

                              }
                            }
                        }
                    }
                 }
              }
           }
        });
    }

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

same question u asked before http://stackoverflow.com/questions/38009927/how-to-set-default-value-to-the-field-and-disable-other-fields-if-default-value/38010512#38010512 — Gayathri Mohan, Jun 27 '16 at 08:14
yes i tried all the way but still my issue is not fixed. can you please help me where i have done the mistake. — Kalaiyarasi M, Jun 27 '16 at 08:18
I used "ALL" in option but the value for this null. So i try to push the value "ALL" inside $scope.model.countries and i have set "ALL" as default selected value. My UI is considering country default value as "ALL" but state gets enabled. — Kalaiyarasi M, Jun 27 '16 at 08:25
My state, city fields should be disabled with default value "ALL" if country selected valued = "ALL" — Kalaiyarasi M, Jun 27 '16 at 08:26
Working fine for disabling values based on previous value = "ALL". But when i select any country name and then state gets enabled. i select state name and i clicked country to "ALL". State field gets disabled but the state value doesn't change to "ALL". State field gets disabled with selected value not with default value. — Kalaiyarasi M, Jun 27 '16 at 10:29
Hi Kalaiyarasi. I removed urgent begging [from this question](http://stackoverflow.com/q/38006308/472495) and someone else has removed identical begging [from this question](http://stackoverflow.com/q/38052073/472495). And yet it still appears on your question here seemingly as a matter of course. Please allow us to make it clear that adding urgent/ASAP to your posts [is not acceptable](http://meta.stackoverflow.com/q/326569/472495). — halfer, Jun 27 '16 at 17:12

Benjamin Schüller · Accepted Answer · 2016-06-27T08:37:20.800

0

One possibility is to initialize the models in the controller:

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

And in the html change the ng-disable-Attributes to

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

edited Jun 27 '16 at 08:37

answered Jun 27 '16 at 08:15

Benjamin Schüller

2,104
1
17
29

when i use the above code my state and city is getting enabled. But i want the rest of the fields should be disabled when country is having default value "ALL". And if country = "ALL" then state and city field value should be "ALL". – Kalaiyarasi M Jun 27 '16 at 08:21
And what if you change your ng-disabled values: ng-disabled="model.selectedCountry != 'ALL'" in selectedState and ng-disabled="model.selectedState != 'ALL'" in seletcedCity? – Benjamin Schüller Jun 27 '16 at 08:27
state is getting enabled by considering that country is selected with value = "ALL" – Kalaiyarasi M Jun 27 '16 at 08:31
Thank you now it is working when i use ng-disabled="model.selectedCountry == 'ALL'" – Kalaiyarasi M Jun 27 '16 at 08:32
Nice to have helped you. Please dont forget to mark the correct answer ;-) – Benjamin Schüller Jun 27 '16 at 08:36
If i reset the country value as default value after selecting State. State gets disabled successfully but it also need to reset to default value. So what can i do? – Kalaiyarasi M Jun 27 '16 at 09:08
I would watch selectedCountry with angular. If it is set to 'ALL' then resest the other models (selectedState and selectedCity). See also https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch – Benjamin Schüller Jun 27 '16 at 09:44

score 0 · Answer 2 · answered Jun 27 '16 at 08:38

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

How to disable all other fields if previous field is having default and using default value as selected value

2 Answers2