Kalaiyarasi M Kalaiyarasi M - 5 months ago 13
HTML Question

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

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. can anyone please help me how to set default value and use default value as selected value. Its urgent.

I tried through searching in google 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>

Answer

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'"
Comments