个人中心
gpt4 book ai didi

javascript - AngularJS 在新页面中显示 1 篇帖子

转载 作者：行者123 更新时间：2023-12-02 13:43:19 25 4
gpt4 key购买 nike

当用户点击 index 中的 Test Post 1 时，我只想在下一个 html 页面 titleDetails.html 中显示 Test Post 1 .html

1)index.html中的titleDetails():

<a ng-click="titleDetails(post)">{{ post.title }} </a>

2) Controller 变量和 titleDetails() 方法:

function BlogController($scope, $http, $rootScope, $location) {
    $scope.createPost = createPost;
    $scope.deletePost = deletePost;
    $scope.editPost = editPost;
    $scope.updatePost = updatePost;
    $scope.titleDetails = titleDetails;
    $scope.postDetail = null;

function titleDetails(post)
{ 
    $scope.postDetail = post; 
    $location.path('#/titleDetails'); 
}

3) titleDetails.html 中的正文:

<body> 
    <div class="container" ng-controller="BlogController">
        <h1>Blog</h1>
            <div>
                <h2>
                    <a>{{ postDetail.title }} </a>
                </h2>
                    <em>{{postDetail.posted}}</em>
                    <p>{{postDetail.body}}</p>
            </div>
    </div> 
</body>
<小时/>

完整代码:

app.js

(function () {
    angular
    .module("BlogApp", [])
    .controller("BlogController", BlogController);

    function BlogController($scope, $http, $rootScope, $location) {
        $scope.createPost = createPost;
        $scope.deletePost = deletePost;
        $scope.editPost = editPost;
        $scope.updatePost = updatePost;
        $scope.titleDetails = titleDetails;
        $scope.postDetail = null;

    function init() {
        getAllPosts();
    }
    init();

    function titleDetails(post)
    { 
        $scope.postDetail = post; 
        $location.path('#/titleDetails'); 
    }

    function updatePost(post){
        console.log(post);
        $http
        .put("/api/blogpost/"+post._id, post)
        .success(getAllPosts);
    }

    function editPost(postId){
        $http
        .get("/api/blogpost/"+postId)
        .success(function(post){
            $scope.post = post;
        });
    }

        function deletePost(postId){
            $http
            .delete("/api/blogpost/"+postId)
            .success(getAllPosts);
        }

        function getAllPosts(){
            $http
            .get("/api/blogpost")
            .success(function(posts) {
                $scope.posts = posts;
            });
        }

        function createPost(post) {
            console.log(post);
            $http
            .post("/api/blogpost",post)
            .success(getAllPosts);
        }
    }
})();

index.html

<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="app.js"></script>
    <title>Title</title>
</head>
<body>
    <div class="container" ng-controller="BlogController">
        <h1>Blog</h1>
            <input ng-model="post.title" class="form-control" placeholder="title"/>
            <textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
            <button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
            <button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>

            <div ng-repeat="post in posts">
                <h2>
                    <a ng-click="titleDetails(post)">{{ post.title }} </a>
                    <a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
                    <a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
                </h2>
                <em>{{post.posted}}</em>
                <p>{{post.body}}</p>
            </div>
    </div>
</body>
</html>

titleDetails.html:

<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="app.js"></script>
    <title>Title</title>
</head>
<body> 
    <div class="container" ng-controller="BlogController">
        <h1>Blog</h1>
            <div>
                <h2>
                    <a>{{ postDetail.title }} </a>
                </h2>
                    <em>{{postDetail.posted}}</em>
                    <p>{{postDetail.body}}</p>
            </div>
    </div> 
</body>
</html>

enter image description here

最佳答案

希望以下步骤对您有用
将 post 对象传递给 titleDetail() 函数。
在index.html

中 
<a  ng-click="titleDetails(post)">{{ post.title }} </a>

在函数中将 post 分配给 $rootScope 变量

$scope.titleDetails = function(post) {
   $rootScope.postDetail = post;
}

现在您的titleDetail.html页面 Controller :

$scope.post = $rootScope.postDetail;

关于javascript - AngularJS 在新页面中显示 1 篇帖子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42809506/

25 4 0
文章推荐： javascript - Croppie 中裁剪的图像不正确
文章推荐： javascript - 需要范围示例的详细信息
文章推荐： javascript - React - 处理状态数组内单元格的修改
文章推荐： javascript - jstree 仅当单击复选框而不是标签时才检查取消选中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com