I have created a new blog project using angular-js. Here I have one page listing all the blogs and if I click on the edit button or delete button, I want to move to next page and show that data in the form from where I updated the blog.
My blog list page: listblog.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First AngularJs Blog</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/blog-home.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="blogapp">
<!-- Navigation -->
<div ng-include="'includes/header.html'">
</div>
<!-- Page Content -->
<div class="container">
<div ng-controller="blogcontroller">
<h2>Blog List</h2>
<p>Here is the awsome blog list</p>
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Blog</th>
<th>Posted On</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="blg in allblog">
<td>{{blg.title}}</td>
<td>{{blg.description}}</td>
<td>{{blg.created_on }}</td>
<td><a href="">Edit</a> || <a href="">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<hr>
<!-- Footer -->
<div ng-include="'includes/footer.html'">
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="controller.js"></script>
</body>
</html>
I want to create a controller for edit. My Controller file: controller.js
var myApp = angular.module("blogapp", []);
myApp.controller('blogcontroller',function ($scope,$http){
$http({method: 'GET' , url: 'getallblog.php'}).success(function(data){
$scope.allblog = data;
});
$scope.new_post =function(){
$http.post("addblog.php" ,{'title' : $scope.title ,'description' : $scope.description }).success(function(data,status,headers,config){
window.location='index.html';
console.log("inserted Successfully");
});
} ;
$scope.editpost = function(index){
$http.post('allscript.php?action=edit_post', { 'id' : index})
.success(function (data, status, headers, config){
})
.error(function (data, status, headers, config){
console.log(status);
});
}
});
And my php script page where all operations are performed allscript.php
<?php
$user ="root";
$pass ="m2n1shlko";
$dbh = new PDO('mysql:host=localhost;dbname=blog_db', $user, $pass);
switch($_GET['action']){
case 'edit_post':
edit_post();
break;
function edit_post(){
$data = json_decode(file_get_contents("php://input"));
$index = $data->id;
$query = $dbh->prepare("SELECT * FROM blog_list where id='$index'") ;
$da = $query->execute();
$getre = $da->fetch(PDO::FETCH_ASSOC);
print_r(json_encode($getre));
return $getre;
}
}
?>
I am new in angular-js. I don't know how to get the ID of that record and to take to the next page for edit/update/delete.
Any help is appreciated. Thanks.
Actually the @Jeremy Thille is right... Please check angular ngRoute module for more info https://docs.angularjs.org/tutorial/step_07.
Also the good practice is to refactor all of your connections/post/get in factories/services, and to inject them directly on your controllers (where you needs of them) http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
Good luck.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments