function friendControllerTest($scope, $http) { $scope.loading = true; $scope.addMode = false; $scope.countryList = []; $scope.stateList = []; function getAllCountry() { $http({ method: 'Get', url: '/Home/GetCountry' }).success(function (data) { $scope.countryList = data; }).error(function () { $scope.errorMessage = 'Not found'; }); } function getStatebyCountryId(Id) { $scope.stateList = null; if (Id) {
<html data-ng-app="" data-ng-controller="friendControllerTest"> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <div class="container"> <strong class="error">{{ error }}</strong> <div id="mydiv" data-ng-show="loading"> <img src="Images/ajax-loader1.gif" class="ajax-loader" /> </div> <p data-ng-hide="addMode"> <a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New </a> </p> <form name="addFriend" data-ng-show="addMode" style="width: 600px; margin: 0px auto;"> <label>FirstName:</label><input type="text" data-ng-model="newfriend.firstname" required /> <label>LastName:</label><input type="text" data-ng-model="newfriend.lastName" required /> <label>Address:</label><input type="text" data-ng-model="newfriend.address" required /> <label>Country:</label> <select ng-model="newfriend.Country" ng-options="c.Name for c in countryList track by c.Id" ng-change="GetStatesList(newfriend.Country.Id)"> <option value="">Select Country</option> </select> <label>State:</label> <select ng-model="newfriend.State" ng-options="s.Name for s in stateList track by s.Id"> <option value="">Select State</option> </select> <label>PostalCode:</label><input type="text" data-ng-model="newfriend.PostalCode" required /> <label>Notes:</label><input type="text" data-ng-model="newfriend.Notes" required /> <br /> <br /> <input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addFriend.$valid" class="btn btn-primary" /> <input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" /> <br /> <br /> </form> <table class="table table-bordered table-hover" style="width: 800px"> <tr> <th>#</th> <td>FirstName</td> <th>LastName</th> <th>Address</th> <th>Country</th> <th>State</th> <th>PostalCode</th> <th>Notes</th> </tr> <tr data-ng-repeat="friend in friends"> <td><strong>{{ friend.Id }}</strong></td> <td> <p data-ng-hide="friend.editMode">{{ friend.firstname}}</p> <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.firstname" /> </td> <td> <p data-ng-hide="friend.editMode">{{ friend.lastname }}</p> <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.lastname" /> </td> <td> <p data-ng-hide="friend.editMode">{{ friend.address }}</p> <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.address" /> </td> <td> <p data-ng-hide="friend.editMode">{{ friend.Country.Name }}</p> <select data-ng-show="friend.editMode" ng-model="friend.Country" ng-options="c.Name for c in countryList track by c.Id" ng-change="$parent.GetStatesList(friend.Country.Id)"> <option value="">Select Country</option> </select> </td> <td> <p data-ng-hide="friend.editMode">{{friend.State.Name }}</p> <select data-ng-show="friend.editMode" ng-model="friend.State" ng-options="s.Name for s in stateList track by s.Id"> <option value="">Select State</option> </select> </td> <td> <p data-ng-hide="friend.editMode">{{ friend.postalcode }}</p> <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.postalcode" /> </td> <td> <p data-ng-hide="friend.editMode">{{ friend.notes }}</p> <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.notes" /> </td> <td> <p data-ng-hide="friend.editMode"><a data-ng-click="toggleEdit(friend)" href="javascript:;">Edit</a> | <a data-ng-click="deletefriend(friend)" href="javascript:;">Delete</a></p> <p data-ng-show="friend.editMode"><a data-ng-click="save(friend)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(friend)" href="javascript:;">Cancel</a></p> </td> </tr> </table> <hr /> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/angularjs") <script src="~/Scripts/MyScript.js"></script> </body>
I’m trying to open the "Country and State" drop-down list in edit mode, and so far I’m sure of it.
But the only problem is that when I click on any entry that needs to be opened in edit mode, the drop-down menu of my country and state is attached correctly, but when I select another country from the drop-down list of the country, then my ng-change does not work, and I don’t want to know why.
This is my view on adding a new entry :
<select ng-model="newfriend.Country" ng-options="c.Name for c in countryList track by c.Id" ng-change="GetStatesList()"> <option value="">Select Country</option> </select> <label>State:</label> <select ng-model="newfriend.State" ng-options="s.Name for s in stateList track by s.Id"> <option value="">Select State</option> </select>
My controller :
function friendControllerTest($scope, $http) { $scope.GetStatesList = function () {
My record viewing screen :
<table class="table table-bordered table-hover" style="width: 800px"> <tr data-ng-repeat="friend in friends"> <td> <p data-ng-hide="friend.editMode">{{ friend.Country.Name }}</p> <select data-ng-show="friend.editMode" ng-model="friend.Country" ng-options="c.Name for c in countryList track by c.Id" ng-change="GetStatesList()"> <option value="">Select Country</option> </select> </td> <td> <p data-ng-hide="friend.editMode">{{friend.State.Name }}</p> <select data-ng-show="friend.editMode" ng-model="friend.State" ng-options="s.Name for s in stateList track by s.Id"> <option value="">Select State</option> </select> </td> </tr> <table> public class HomeController : Controller { // // GET: /Home/ private FriendsEntities db = new FriendsEntities(); public ActionResult Index() { return View(); } public ActionResult GetFriendsList(string text) { var data = db.Friends.Select ( d => new FriendModel { Id=d.Id, firstname = d.firstname, lastname = d.lastname, address = d.address, notes = d.notes, postalcode = d.postalcode, Country = d.Country.Friends.Select ( x => new CountryModel { Id=x.Country.Id, Name = x.Country.Name } ).FirstOrDefault(), State = d.State.Friends.Select ( s => new StateModel { Id=s.State.Id, Name = s.State.Name } ).FirstOrDefault() } ).ToList(); return Json(data, JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult AddFriends(Friends FriendsModel) { var result = db.Friends.Add(FriendsModel); db.SaveChanges(); var data = db.Friends.Where(t => t.Id == result.Id).Select ( d => new FriendModel { Id=d.Id, firstname = d.firstname, lastname = d.lastname, address = d.address, notes = d.notes, postalcode = d.postalcode, Country = d.Country.Friends.Select ( x => new CountryModel { Id=x.Country.Id, Name = x.Country.Name } ).FirstOrDefault(), State = d.State.Friends.Select ( b => new StateModel { Id=b.State.Id, Name = b.State.Name } ).FirstOrDefault() } ).SingleOrDefault(); return Json(data); } public ActionResult RemoveFriend(int id) { Friends friend = db.Friends.Find(id); db.Friends.Remove(friend); db.SaveChanges(); return Json(friend); } public JsonResult GetCountryState() { List<CountryModel> Country = new List<CountryModel>().ToList(); Country.Add(new CountryModel() { Id = 0, Name = "Select Country" }); var Data = db.Country.Select ( d => new CountryModel { Id = d.Id, Name = d.Name, State = d.State.Select ( x => new StateModel { Id = x.Id, Name = x.Name } ).ToList() } ).ToList(); Country.AddRange(Data); return Json(Country, JsonRequestBehavior.AllowGet); } public JsonResult GetCountry() { var Data = db.Country.Select ( d => new CountryModel { Id = d.Id, Name = d.Name, } ).ToList(); return Json(Data, JsonRequestBehavior.AllowGet); } public JsonResult GetStateByCountryId(int CountryId) { var getStateList = db.State.Where(p => p.CountryId == CountryId).Select(x => new { x.Id, x.Name }).ToList(); return Json(getStateList, JsonRequestBehavior.AllowGet); } [HttpPut] public ActionResult EditFriend(Friends FriendModel) { Friends friend = db.Friends.Find(FriendModel.Id); friend.firstname = FriendModel.firstname; friend.lastname = FriendModel.lastname; friend.postalcode = FriendModel.postalcode; friend.notes = FriendModel.notes; friend.address = FriendModel.address; friend.CountryId = FriendModel.Country.Id; friend.StateId = FriendModel.State.Id; db.SaveChanges(); var friendModel = new FriendModel(); friendModel.Id = friend.Id; friendModel.firstname = friend.firstname; friendModel.lastname = friend.lastname; friendModel.postalcode = friend.postalcode; friendModel.notes = friend.notes; friendModel.address = friend.address; friendModel.CountryId = friend.CountryId; friendModel.StateId = friend.StateId; return Json(friendModel); } } public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*")); // Use the development version of Modernizr to develop with and learn from. Then, when you're // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css")); bundles.Add(new ScriptBundle("~/bundles/angularjs").Include( "~/Scripts/angular.min.js")); bundles.Add(new ScriptBundle("~/bundles/appjs").Include( "~/Scripts/app/customerCtrl.js")); } }