Question

我使用angular-js创建了一个新的博客项目。在这里，我有一个列出所有博客的页面，如果我点击编辑按钮或删除按钮，我想转到下一页并在表格中显示我更新博客的数据。

我的博客列表页面：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>

我想创建一个用于编辑的控制器。我的控制器文件：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);
        });


  }

  });

我的php脚本页面，其中执行所有操作 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;


}



}
?>

我是angular-js的新手。我不知道如何获取该记录的ID并进入下一页进行编辑/更新/删除。

感谢任何帮助。感谢。

Answer 1

您可以使用它来保存不同页面之间的数据 $window.sessionStorage

Answer 2

实际上@Jeremy Thille是对的...请检查角度ngRoute模块以获取更多信息https://docs.angularjs.org/tutorial/step_07。
另一个好的做法是重构所有连接/发布/获取工厂/服务，并将它们直接注入您的控制器（您需要它们）http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

祝你好运。

如何将数据从一个页面传递到角度js中的其他页面

2 个答案: