AngularJS #4
نویسنده: مهدی سعیدی فر
تاریخ: ۱۳۹۲/۰۸/۲۳ ۱۷:۱۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
<div ng-app="myApp">
<div ng-controller="CommentCtrl">
<div ng-repeat="comment in comments">
<div style="float:right;cursor:pointer;" ng-click="remove(comment.Id,$index);">X</div>
<a href="#">
<img style="width:32px;" ng-src="/Content/user.gif" alt="{{comment.Name}}">
</a>
<div>
<h4>{{comment.Name}}</h4>
{{comment.CommentBody}}
</div>
</div>
<div>
<form action="/Comment/Add" method="post">
<div>
<label for="Name">Name</label>
<input id="Name" type="text" name="Name" ng-model="comment.Name" placeholder="Your Name" />
</div>
<div>
<label for="Email">Email</label>
<input id="Email" type="text" name="Email" ng-model="comment.Email" placeholder="Your Email" />
</div>
<div>
<label for="CommentBody">Comment</label>
<textarea id="CommentBody" name="CommentBody" ng-model="comment.CommentBody" placeholder="Your Comment"></textarea>
</div>
<button type="button" ng-click="addComment()">Send</button>
</form>
</div>
</div>
</div> var app = angular.module('myApp', []);
app.controller('CommentCtrl', function ($scope, $http) {
$scope.comment = {};
$http.get('/Comment/GetAll').success(function (data) {
$scope.comments = data;
})
$scope.addComment = function () {
$http.post("/Comment/Add", $scope.comment).success(function () {
$scope.comments.push({ Name: $scope.comment.Name, CommentBody: $scope.comment.CommentBody });
$scope.comment = {};
});
};
$scope.remove = function (id, index) {
$http.post("/Comment/Remove", { id: id }).success(function () {
$scope.comments.splice(index, 1);
});
};
}); var comments = _db.Comments.Include(x => x.Children).ToList().Where(x => x.Parent == null).ToList();
var result = JsonConvert.SerializeObject(comments, Formatting.Indented,
new JsonSerializerSettings
{
ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
});
return Content(result); var comments = _db.Comments.Include(x => x.Children).ToList().Where(x => x.Parent == null).ToList(); return Json(comments , JsonRequestBehavior.AllowGet);
var saman = angular.module('SamanApplication', []);
saman.service('loginService', ['$http', function (http) {
var loginData = [];
this.login = function () {
http.get('Saman/LogOn/IsLogedIn').success(function (data, status, headers, config) {
loginData = data;
});
return loginData;
};
}]);
saman.controller('loginController', function ($scope, loginService) {
$scope.response = [];
$scope.click = function () { $scope.response = loginService.login() };
}); <body ng-app="SamanApplication">
<div ng-controller="loginController">
<button ng-click="click()">Test</button>
{{data}}
</div>
</body> //define
app.service('objUser', function ($http) {
this.user = [{
id: null,
firstName: null,
lastName: null,
email: null
}];
this.userList = function () {
var promise = $http.get('api/user')
.success(function (res) {
return res;
});
return promise;
};
});
//call
app.controller('UserListCtrl', function ($scope, objUser) {
$scope.user = objUser.user;
objUser.userList().then(function (promise) {
$scope.user = promise.data;
});
}); <div ng-app="myApp" id="ng-app">
<div ng-controller="MenuCtrl" style="width:300px">
<div style="height:200px;overflow:auto;">
<div ng-repeat="menu in menu" >
<div style="float:right;cursor:pointer;" ng-click="remove(menu.ID,$index);">X</div>
<a href="#">
<img style="width:32px;" ng-src="/Content/user.gif" alt="{{menu.Title}}">
</a>
<div>
<h4>{{menu.Title}}</h4>
{{menu.Url}}
</div>
</div>
</div>
<form action="/Menu/Add" method="post">
<div>
<label for="Title">عنوان</label>
<input id="Title" type="text" name="Title" ng-model="menu.Title" placeholder="عنوان" />
</div>
<div>
<label for="Url">آدرس</label>
<input id="Url" type="text" name="Url" ng-model="menu.Url" placeholder="آدرس" />
</div>
<div>
<label for="ParentID">والد</label>
<input id="ParentID" type="text" name="ParentID" ng-model="menu.ParentID" placeholder="والد" />
</div>
<button type="button" ng-click="addmenu()">ذخیره</button>
</form>
</div>
</div> var app = angular.module('myApp', ['ngAnimate']);
app.controller('MenuCtrl', function ($scope, $http) {
$scope.menu = {};
$http.get('/Menu/GetAll').success(function (data) {
$scope.menu = data;
})
$scope.addmenu= function () {
$http.post("/Menu/Add", $scope.menu).success(function () {
$scope.menus.push({ Title: $scope.menu.Title, Url: $scope.menu.Url, ParentID: $scope.menu.ParentID });
$scope.menu = {};
});
};
$scope.remove = function (ID, index) {
$http.post("/Menu/Remove", { ID: ID }).success(function () {
$scope.menu.splice(index, 1);
});
};
}); public class MenuController : Controller
{
//
// GET: /Menu/
MyContext _db = new MyContext();
public ActionResult GetAll()
{
var menu = _db.Menus.ToList();
var result = JsonConvert.SerializeObject(menu, Formatting.Indented,
new JsonSerializerSettings
{
ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
});
return Content(result);
}
public ActionResult Add(Menu menu)
{
_db.Menus.Add(menu);
_db.SaveChanges();
return Json("1");
}
public ActionResult Remove(int id)
{
var selectedMenu = new Menu { ID = id };
_db.Menus.Attach(selectedMenu);
_db.Menus.Remove(selectedMenu);
_db.SaveChanges();
return Json("1");
}
public ActionResult Index()
{
return View();
}
} public ActionResult Add(Comment comment)
{
_db.Comments.Add(comment);
_db.SaveChanges();
return Json(comment.Id);
} $scope.addComment = function () {
$http.post("/Comment/Add", $scope.comment).success(function (id) {
$scope.comments.push({Id:id ,Name: $scope.comment.Name, CommentBody: $scope.comment.CommentBody });
$scope.comment = {};
});
}; <button ng-click="addComment()">Send</button>
<button type="button" ng-click="addComment()">Send</button>
<button type="button" style="float:right;cursor:pointer;" ng-click="remove({{comment.id}},$Index);">X</button> "Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 9 of the expression [remove({{comment.id}},$Index);] starting at [{comment.id}},$Index);].