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) { // Check here country Id is null or not
$http({
method: 'POST',
url: '/Home/GetStateByCountryId/',
data: JSON.stringify({ CountryId:Id })
}).success(function (data) {
$scope.stateList = data;
}).error(function (data) {
alert(data.message);
$scope.message = 'not found';
});
}
else {
$scope.stateList = null;
}
}
$scope.GetStatesList = function (id) {
if (id) { // Check here country Id is null or not
$http({
method: 'POST',
url: '/Home/GetStateByCountryId/',
data: JSON.stringify({ CountryId: id })
}).success(function (data) {
$scope.stateList = data;
}).error(function (data) {
alert(data.message);
$scope.message = 'not found';
});
}
else {
$scope.stateList = null;
}
}
$scope.myMethod = function () {
var text = $scope.newfriend.SearchText;
$http.get('../Home/GetFriendsList', { params: { 'text': text } }).success(function (data) {
$scope.friends = data;
})
.error(function () {
$scope.error = "An Error has occured while loading posts!";
});
}
$http.get('../Home/GetFriendsList').success(function (data) {
alert("list called")
$scope.friends = data;
$scope.loading = false;
})
.error(function () {
$scope.error = "An Error has occured while loading posts!";
$scope.loading = false;
});
$scope.toggleAdd = function () {
$scope.addMode = !$scope.addMode;
if ($scope.addMode) {
getAllCountry();
}
};
$scope.toggleEdit = function () {
this.friend.editMode = !this.friend.editMode;
getAllCountry();
if (this.friend.Country.Id > 0)
getStatebyCountryId(this.friend.Country.Id);
};
$scope.add = function () {
$scope.loading = true;
var newfriend = {
firstname: $scope.newfriend.firstname,
lastname: $scope.newfriend.lastName,
address: $scope.newfriend.address,
postalcode: $scope.newfriend.PostalCode,
notes: $scope.newfriend.Notes,
CountryId: $scope.newfriend.Country.Id,
StateId: $scope.newfriend.State.Id
}
$http.post('../Home/AddFriends', newfriend).success(function (data) {
alert("Added Successfully!!");
$scope.addMode = false;
$scope.friends.push(data);
$scope.loading = false;
$scope.newfriend = "";
}).error(function (data) {
$scope.error = "An Error has occured while Adding Friend! " + data;
$scope.loading = false;
});
};
$scope.save = function () {
$scope.loading = true;
var frien = this.friend;
$http.put('../Home/EditFriend', frien).success(function (data) {
alert("Saved Successfully!!");
frien.editMode = false;
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Saving Friend! " + data;
$scope.loading = false;
});
};
$scope.deletefriend = function () {
$scope.loading = true;
var friendid = this.friend.Id;
$http.delete('../Home/RemoveFriend/' + friendid).success(function (data) {
alert("Deleted Successfully!!");
$.each($scope.friends, function (i) {
if ($scope.friends[i].Id === friendid) {
$scope.friends.splice(i, 1);
return false;
}
});
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Saving Friend! " + data;
$scope.loading = false;
});
};
}<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 am trying to open my Country and state dropdown in edit mode and so far i am successfull in that.
我试图在编辑模式下打开我的国家和州下拉列表,到目前为止我成功了。
But the only problem is when i am clicking on any record to open in edit mode my both country and state dropdown are binding correctly but when i am selecting other country from country dropdown then my ng-change is not firing and i dont know why.
但唯一的问题是,当我点击任何记录以编辑模式打开时,我的国家和州下拉列表都正确绑定但是当我从国家/地区下拉列表中选择其他国家时,我的ng-change未触发,我不知道为什么。
This is my view for adding a new record:
这是我添加新记录的观点:
<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 () {
//server side call to fetch state by country id
}
$scope.toggleEdit = function () {
this.friend.editMode = !this.friend.editMode;
getAllCountry();
if (this.friend.Country.Id > 0)
getStatebyCountryId(this.friend.Country.Id);
};
};
My Display records view:
我的显示记录视图:
<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"));
}
}
2 个解决方案
#1
5
Your problem is you are accessing scope inside ng-repeat & Directive like ng-repeat, ng-switch, ng-view, ng-include& ng-if does create a new scope from currently running scope. For referring parent scope method or variable you need use $parent, that provides access to parent
您的问题是您正在访问ng-repeat和Directive中的范围,例如ng-repeat,ng-switch,ng-view,ng-include&ng-if是否从当前运行的范围创建新范围。对于引用父范围方法或变量,您需要使用$ parent,它提供对父级的访问
You should first need to read Understanding of Angular Scope Inheritance.
您首先需要阅读Angular Scope Inheritance的理解。
Plunkr for Explanation of the same.
Plunkr解释相同。
Below is the only change required inside you markup
以下是标记内所需的唯一更改
ng-change="GetStatesList()"
to
ng-change="$parent.GetStatesList()"
Hope this could help you, Thanks.
希望这可以帮助你,谢谢。
#2
2
ng-change event not firing in Angularjs
ng-change事件未在Angularjs中触发
You have two views .
你有两个观点。
1. Add record( give info to country ,state)
2. Display stored records (with edit mode to change country,state)
In your add record view ng-change="GetStatesList()" fires and show state list by calling GetStatesList() function friendControllerTest when country selected (model value changed) .
在添加记录视图中,ng-change =“GetStatesList()”通过在选择国家/地区时调用GetStatesList()函数friendControllerTest来触发并显示状态列表(模型值已更改)。
Your **Display records view has its own controller.it doesn't have GetStatesList() function ,so that ng-change not working .
您的**显示记录视图有自己的controller.it没有GetStatesList()函数,因此ng-change无法正常工作。
Two solution for this issue is:
这个问题的两个解决方案是:
1. Make "$scope.GetStatesList()" to "$rootScope.GetStatesList()"- rootscope
2. Write service/factory method then you can use wherever you want.
EDIT: but using $parent.GetStateList() is good practice as @pankajparkar's soltution
编辑:但使用$ parent.GetStateList()是@ pankajparkar的解决方案
#1
5
Your problem is you are accessing scope inside ng-repeat & Directive like ng-repeat, ng-switch, ng-view, ng-include& ng-if does create a new scope from currently running scope. For referring parent scope method or variable you need use $parent, that provides access to parent
您的问题是您正在访问ng-repeat和Directive中的范围,例如ng-repeat,ng-switch,ng-view,ng-include&ng-if是否从当前运行的范围创建新范围。对于引用父范围方法或变量,您需要使用$ parent,它提供对父级的访问
You should first need to read Understanding of Angular Scope Inheritance.
您首先需要阅读Angular Scope Inheritance的理解。
Plunkr for Explanation of the same.
Plunkr解释相同。
Below is the only change required inside you markup
以下是标记内所需的唯一更改
ng-change="GetStatesList()"
to
ng-change="$parent.GetStatesList()"
Hope this could help you, Thanks.
希望这可以帮助你,谢谢。
#2
2
ng-change event not firing in Angularjs
ng-change事件未在Angularjs中触发
You have two views .
你有两个观点。
1. Add record( give info to country ,state)
2. Display stored records (with edit mode to change country,state)
In your add record view ng-change="GetStatesList()" fires and show state list by calling GetStatesList() function friendControllerTest when country selected (model value changed) .
在添加记录视图中,ng-change =“GetStatesList()”通过在选择国家/地区时调用GetStatesList()函数friendControllerTest来触发并显示状态列表(模型值已更改)。
Your **Display records view has its own controller.it doesn't have GetStatesList() function ,so that ng-change not working .
您的**显示记录视图有自己的controller.it没有GetStatesList()函数,因此ng-change无法正常工作。
Two solution for this issue is:
这个问题的两个解决方案是:
1. Make "$scope.GetStatesList()" to "$rootScope.GetStatesList()"- rootscope
2. Write service/factory method then you can use wherever you want.
EDIT: but using $parent.GetStateList() is good practice as @pankajparkar's soltution
编辑:但使用$ parent.GetStateList()是@ pankajparkar的解决方案