I have a dependent drop down for country and state selection. State drop down is dependent on country selection. Actually i create a directive for it in a seprate file module. Below is this. So when i am going on edit page to edit this then no state display selected. Basically i just wanted to pass selected country from controller to directive. If i get this then i simply load the corresponding state value from directive. Please help any one. What is the solution of it??? Thanks in advance:)
My Directive is this :
function(window) {
"use strict";
var template = '<div class="control-group">'
template += '<label for="country" class="control-label">{{countryLabel}}</label>';
template += '<div class="controls" val="{{ngModel.country}}">';
template += '<select name="country" ng-change="selectCountry()" ng-model="ngModel.country" required class="form-control">';
template += '<option value="">Select Country</option>';
template +='<option ng-repeat="theCountry in countries track by $index" >{{theCountry}}</option>';
template +='</select>';
template +='</div>';
template +='</div>';
template += '<div class="control-group">';
template += '<label for="country" class="control-label">{{stateLabel}}</label>';
template += '<div class="controls">';
template += '<select name="state" ng-model="ngModel.county" ng-disabled="!ngModel.country" required class="form-control">';
template += '<option value="">Select State</option>';
template +='<option ng-repeat="optStates in states track by $index">{{optStates}}</option>';
template +='</select>';
template +='</div>';
template +='</div>';
angular
.module("angularCountryState")
.directive("countryStateSelect", [ function () {
return {
restrict: "E",
template: template,
scope: { country: "=", countryState: "=?state", ngModel: '='},
link: function (scope, element, attrs) {
scope.countryLabel = "Country";
scope.stateLabel = "State";
if(typeof attrs.countryLabel != 'undefined'){
scope.countryLabel = attrs.countryLabel;
}
if(typeof attrs.stateLabel != 'undefined'){
scope.stateLabel = attrs.stateLabel;
}
alert(scope.country);
scope.countries = new Array("Afghanistan", "Albania", "Algeria", "American Samoa", "Angola", "Anguilla");
scope.state = new Array();
scope.state[1]="Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol";
scope.state[2]="Berat|Bulqize|Delvine|Devoll (Bilisht)|Diber (Peshkopi)|Durres|Elbasan|Fier|Gjirokaster|Gramsh|Has (Krume)|Kavaje|Kolonje (Erseke)|Korce|Kruje|Kucove|Kukes|Kurbin|Lezhe|Librazhd|Lushnje|Malesi e Madhe (Koplik)|Mallakaster (Ballsh)|Mat (Burrel)|Mirdite (Rreshen)|Peqin|Permet|Pogradec|Puke|Sarande|Shkoder|Skrapar (Corovode)|Tepelene|Tirane (Tirana)|Tirane (Tirana)|Tropoje (Bajram Curri)|Vlore";
scope.state[3]="Adrar|Ain Defla|Ain Temouchent|Alger|Annaba|Batna|Bechar|Bejaia|Biskra|Blida|Bordj Bou Arreridj|Bouira|Boumerdes|Chlef|Constantine|Djelfa|El Bayadh|El Oued|El Tarf|Ghardaia|Guelma|Illizi|Jijel|Khenchela|Laghouat|M'Sila|Mascara|Medea|Mila|Mostaganem|Naama|Oran|Ouargla|Oum el Bouaghi|Relizane|Saida|Setif|Sidi Bel Abbes|Skikda|Souk Ahras|Tamanghasset|Tebessa|Tiaret|Tindouf|Tipaza|Tissemsilt|Tizi Ouzou|Tlemcen";
scope.state[4]="Eastern|Manu'a|Rose Island|Swains Island|Western";
scope.state[5]="Andorra la Vella|Bengo|Benguela|Bie|Cabinda|Canillo|Cuando Cubango|Cuanza Norte|Cuanza Sul|Cunene|Encamp|Escaldes-Engordany|Huambo|Huila|La Massana|Luanda|Lunda Norte|Lunda Sul|Malanje|Moxico|Namibe|Ordino|Sant Julia de Loria|Uige|Zaire";
scope.selectCountry = function(){
var selectedCountry = scope.ngModel.country;
var indexCountry = scope.countries.indexOf(selectedCountry)+1;
scope.states = scope.state[indexCountry].split("|");
scope.countryState = '';
if(scope.states.length == 1){
scope.states = new Array(selectedCountry);
}
//indexCountry correspond to the "Select" label
if(indexCountry == 0){
scope.states = new Array("");
}
}
// scope.selectCountry();
}
};
}]);
}());My Controller Is This
app.controller('EmployeeloanCtrl', function ($scope, $rootScope, $routeParams, Restangular, showAlertSrvc, ngTableParams, $filter, listService, $location, $cookieStore){
//This Function Is Use To Get The Detail Of The User Also Update The Detail.
$scope.getUserDetail = function(){
Restangular.one('users', uid).get({is_archived:'0'}).then(function(user){
$scope.country = "india";
$scope.user = user;
//This Function Is Use To Update The User Personal Details.
$scope.editUserinfo = function(user){
Restangular.one('users', uid).customPUT(user).then(function(responce){
$location.path('/employee/loan/addloaninfo');
});
};
});
};
});This is my html code :
<form ng-submit="editAccount(user)" class="form-horizontal">
<fieldset>
<div class="control-group">
<label for="password" class="control-label">Password</label>
<div class="controls">
<span ng-controller="modalpchangeCtrl as ctrl">
<a class="btn btn-small btn-success" ng-click="ctrl.showModal(notification._id,'sender_id')">Change Password</a>
</span>
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<label for="first name" class="control-label">First Name</label>
<div class="controls">
<input type="text" class="span4" placeholder="First Name" ng-model="user.first_name" ng-required="true">
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<label for="middle name" class="control-label">Middle Name</label>
<div class="controls">
<input type="text" class="span4" placeholder="Middle Name" ng-model="user.middle_name" ng-required="true">
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<label for="last name" class="control-label">Last Name</label>
<div class="controls">
<input type="text" class="span4" placeholder="Last Name" ng-model="user.last_name" ng-required="true">
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<label for="email" class="control-label">Email</label>
<div class="controls">
<input type="text" class="span4" ng-readonly="true" placeholder="Email" ng-model="user.email" ng-required="true">
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<label for="phone" class="control-label">Address line 1</label>
<div class="controls">
<input type="text" class="span4" placeholder="address line 1" ng-model="user.address_line_1" ng-required="true">
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<label for="phone" class="control-label">Address line 2</label>
<div class="controls">
<input type="text" class="span4" placeholder="address line 2" ng-model="user.address_line_2" ng-required="true">
</div> <!-- /controls -->
</div> <!-- /control-group -->
<country-state-select ng-model="user"></country-state-select>
<div class="control-group">
<label for="city" class="control-label">City</label>
<div class="controls">
<input type="text" class="span4" placeholder="city" ng-model="user.city">
</div> <!-- /control-group -->
</div>
<div class="control-group">
<label for="post_code" class="control-label">Post code</label>
<div class="controls">
<input type="text" class="span4" placeholder="post code" ng-model="user.post_code" ng-required="true">
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<div class="form-actions">
<button class="btn btn-primary" type="submit">Save</button>
<a class="btn" href="/#/">Cancel</a>
</div> <!-- /form-actions -->
</fieldset>
</form>Suggetion i tried :
I also look a plunker link http://plnkr.co/edit/gp0zIwnj9Oz3IpQPXhDI?p=preview . I just want the data which i set from controller i wanted to get this in alert.
