选择特定项目并在模式中查看，以使用angularJs更新到Firebase

我添加了一个post应用程序，用户可以从中将数据推送到firebase。用户从下拉列表中选择将成为firebase中节点的类别，然后填写其他信息并提交给firebase

在视图中，我迭代数据以将其显示为分类分隔，用户可以从中通过按edit/delete按钮选择编辑/删除帖子

我的问题： 1-当用户删除帖子时，整个类别将被删除，而不是用户只想删除的帖子

2-当用户单击编辑模式弹出窗口时，这些弹出窗口假设包含来自帖子的数据，用户可以选择更改和提交。问题是模态图中没有显示任何内容

这里是addPost控制器：

$scope.AddPost = function(files) {
            var url = "https://hotelboard.firebaseio.com/Articles/";
            var category = $scope.Category;

            //var fb = new Firebase("https://hotelboard.firebaseio.com/Articles/");

            var fb = new Firebase(url).child(category);

            var title = $scope.article.title;
            var post  = $scope.article.post;
            var user  = CommonProp.getUser();

            if (files == undefined){

            var push =  fb.push({
                        title:     title,
                        post:      post,
                        emailId:   user,
                        images : null,
                        '.priority': user

                    },function(error) {
                        if (error) {
                            console.log("Error:",error);
                        } else {
                        console.log("Post set successfully!");
                        $location.path('/home');
                        console.log(push.key());
                        $scope.$apply();
                    }   
                });

            } else {

            Upload.base64DataUrl(files).then(function(base64Urls){

                fb.push({
                    title:     title,
                    post:      post,
                    emailId:   user,
                    images : base64Urls,
                    '.priority': user

                },function(error) {
                    if (error) {
                        console.log("Error:",error);
                    } else {
                    console.log("Post set successfully!");
                    $location.path('/home');
                    $scope.$apply();

                    }

                });

            });
        }
}
    $scope.remove = function(array, index){
    array.splice(index, 1);


}

}]);

'use strict';

angular.module('myApp.home', [])


.controller('HomeCtrl', ['$scope','CommonProp','$firebaseArray','$firebaseObject','$location', function($scope,CommonProp,$firebaseArray,$firebaseObject,$location) {
    $scope.username = CommonProp.getUser();

    if(!$scope.username){
    $location.path('/main');
    }

    var url = "https://hotelboard.firebaseio.com/Articles/";
    var fb = new Firebase(url);
    //var fbObj = fb.startAt($scope.username).endAt($scope.username);   

    $scope.articles = $firebaseArray(fb);


    $scope.editPost = function(id) {
        var fb = new Firebase(url + id);

        $scope.postToUpdate = $firebaseObject(fb);
        $('#editModal').modal();

    }

    $scope.update = function() {
        var fb = new Firebase(url + $scope.postToUpdate.$id);
        if($scope.postToUpdate.images == undefined){
            $scope.postToUpdate.images = null;
        }

        fb.update({
            title:   $scope.postToUpdate.title,
            post:   $scope.postToUpdate.post,
            emailId:   $scope.postToUpdate.emailId,
            images: $scope.postToUpdate.images
        }, function(error) {
            if (error) {
                console.log('Error:', error);
            } else {
                $('#editModal').modal('hide');
            }
        });
    }

    $scope.confirmDelete = function(id) {
        var fb = new Firebase(url + id);
        $scope.postToDelete = $firebaseObject(fb);
        $('#deleteModal').modal();

    }

    $scope.deletePost = function() {
        var fb = new Firebase(url + $scope.postToDelete.$id);

        fb.remove(function(error) {
            if (error) {
                console.log('Error:', error);
            } else {
                $('#deleteModal').modal('hide');
            }

        });
    }

    $scope.remove = function(array, index){
    array.splice(index, 1);
}
}]);

以下是视图代码，其中包括模式：

<div class="list-group" ng-repeat="article in articles">

                    <h1>{{article.$id}}</h1>

                <div class="list-group" ng-repeat="(key,art) in article">
                    <span class="list-group-item active">

                        <h4 class="list-group-item-heading">{{art.title}}</h4>
                        <p class="list-group-item-text">{{art.post}}</p>
                            <div class="row">
                                <div class="col-sm-2" ng-repeat="image in art.images">
                                    <img ng-show="art.images"  ng-src={{image}} width="50px" height="50px" >
                                </div>
                            </div>
                                    <span class="pull-right" >
                                        <button class="btn btn-xs btn-info" ng-click="editPost(article.$id)" data-target="#editModal">EDIT</button>
                                        <button class="btn btn-xs btn-warning" ng-click="confirmDelete(article.$id)" data-target="#deleteModal">DELETE</button>
                                    </span>
                    </span>
                </div>
            </div>

            <!-- Edit Modal popup -->
            <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                            </button>
                            <h4 class="modal-title" id="editModalLabel">Update Post</h4>
                        </div>

                        <div class="modal-body">
                            <form role="form">
                                <div class="form-group">
                                    <label for="recipient-name" class="control-label">Title:</label>
                                    <input type="text" class="form-control" ng-model="postToUpdate.title" id="recipient-name">
                                </div>
                                <div class="form-group">
                                    <label for="message-text" class="control-label">Post:</label>
                                    <textarea class="form-control" ng-model="postToUpdate.post" id="message-text"></textarea>
                                </div>
                                <div class="form-group" ng-show="postToUpdate.images">
                                    <label for="picturs" class="control-label">Pictures:</label>
                                    <div ng-repeat="image in postToUpdate.images"><img ng-src={{image}} width="50px" height="50px"><span class="glyphicon glyphicon-remove-circle" ng-click="remove(postToUpdate.images, $index)"></span></div>
                                </div>
                            </form>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" ng-click="update()">Publish</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Delete Modal popup -->
            <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header" style="text-align:center;">
                            <h4 class="modal-title" style="color:red;" id="deleteModalLabel">You are going to Delete this post forever !!</h4>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" ng-click="deletePost()">Delete</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

以下是视图的屏幕截图：

这里是我的Firebase结构：

Articles
  Events
     -K09Iy9pa6FEA0rmmEMH
        emailId:"said@gmail.com"
        images
            0:"data:image/png;base64,iVBORw0KGgoAAAANSUhEU
        post: "This is event 1"
        title:"Event 1"

 Facilities
     -K09Ibsqz5L82PUoCEjY
        emailId: "said@gmail.com"
        post: "this is fac 1"
        title:"Facility 1"
 Offers
     -K09IipPdR7We_D5Tzb9
        emailId:"said@gmail.com"
        post:"this is offer 1"
        title:"Offer 1"

在我使用下拉列表进行此实现之前，一切都正常，甚至每个用户都可以使用此代码显示自己的数据：

var fbObj = fb.startAt($scope.username).endAt($scope.username);

当我将其用作FirebaseArray时，该代码正在工作，但现在不工作

请帮忙

更新解决方案

---

我通过在home.html的模式中为addPost&deletePost添加了一个关键参数来修复此问题，并更改了editPost和update函数，如下所示：

$scope.editPost = function(id,key) {
        var fbE = new Firebase(url + id + '/' + key);

        $scope.postToUpdate = $firebaseObject(fbE);
        $('#editModal').modal();
        console.log($firebaseObject(fbE));
    }

    $scope.update = function() {

        var fbU = $scope.postToUpdate.$ref();
        console.log($firebaseObject(fbU));
        if($scope.postToUpdate.images == undefined){
            $scope.postToUpdate.images = null;
        }

        fbU.update({
            title:   $scope.postToUpdate.title,
            post:   $scope.postToUpdate.post,
            emailId:   $scope.postToUpdate.emailId,
            images: $scope.postToUpdate.images
        }, function(error) {
            if (error) {
                console.log('Error:', error);
            } else {
                $('#editModal').modal('hide');
            }
        });
    }

    $scope.confirmDelete = function(id,key) {
        var fbC = new Firebase(url + id +'/' + key);
        $scope.postToDelete = $firebaseObject(fbC);
        $('#deleteModal').modal();

    }

    $scope.deletePost = function() {

        var fbD = $scope.postToDelete.$ref();
        fbD.remove(function(error) {
            if (error) {
                console.log('Error:', error);
            } else {
                $('#deleteModal').modal('hide');
            }

        });
    }

$scope.editPost = function(id,key) {
        var fbE = new Firebase(url + id + '/' + key);

        $scope.postToUpdate = $firebaseObject(fbE);
        $('#editModal').modal();
        console.log($firebaseObject(fbE));
    }

    $scope.update = function() {

        var fbU = $scope.postToUpdate.$ref();
        console.log($firebaseObject(fbU));
        if($scope.postToUpdate.images == undefined){
            $scope.postToUpdate.images = null;
        }

        fbU.update({
            title:   $scope.postToUpdate.title,
            post:   $scope.postToUpdate.post,
            emailId:   $scope.postToUpdate.emailId,
            images: $scope.postToUpdate.images
        }, function(error) {
            if (error) {
                console.log('Error:', error);
            } else {
                $('#editModal').modal('hide');
            }
        });
    }

    $scope.confirmDelete = function(id,key) {
        var fbC = new Firebase(url + id +'/' + key);
        $scope.postToDelete = $firebaseObject(fbC);
        $('#deleteModal').modal();

    }

    $scope.deletePost = function() {

        var fbD = $scope.postToDelete.$ref();
        fbD.remove(function(error) {
            if (error) {
                console.log('Error:', error);
            } else {
                $('#deleteModal').modal('hide');
            }

        });
    }

---

希望它能帮助别人。

您在编辑和删除功能中没有考虑类别。此外，您应该利用AngularFire为您提供的函数，而不是到处创建新变量

var url = "https://hotelboard.firebaseio.com/Articles/";
var fb  = new Firebase(url);
var postIdToDelete;

$scope.articles = $firebaseArray(fb.child($scope.Category));

$scope.editPost = function(id) {
    $scope.postToUpdate = $scope.articles.$getRecord(id);
    $('#editModal').modal();
};

$scope.update = function() {
    if ($scope.postToUpdate.images === undefined) {
        $scope.postToUpdate.images = null;
    }

    $scope.articles.$save($scope.postToUpdate).then(function() {
        $('#editModal').modal('hide');
    }, function(error) {
        console.log('Error:', error);
    });
};

$scope.confirmDelete = function(id) {
    postIdToDelete = id;
    $('#deleteModal').modal();
};

$scope.deletePost = function() {
    $scope.articles.$remove(postIdToDelete).then(function() {
        $('#deleteModal').modal('hide');
    }, function(error) {
        console.log('Error:', error);
    });
};

---

我通过在home.html的模式中为addPost&deletePost添加了一个关键参数来修复此问题，并更改了editPost和update函数，如下所示：

$scope.editPost = function(id,key) {
        var fbE = new Firebase(url + id + '/' + key);

        $scope.postToUpdate = $firebaseObject(fbE);
        $('#editModal').modal();
        console.log($firebaseObject(fbE));
    }

    $scope.update = function() {

        var fbU = $scope.postToUpdate.$ref();
        console.log($firebaseObject(fbU));
        if($scope.postToUpdate.images == undefined){
            $scope.postToUpdate.images = null;
        }

        fbU.update({
            title:   $scope.postToUpdate.title,
            post:   $scope.postToUpdate.post,
            emailId:   $scope.postToUpdate.emailId,
            images: $scope.postToUpdate.images
        }, function(error) {
            if (error) {
                console.log('Error:', error);
            } else {
                $('#editModal').modal('hide');
            }
        });
    }

    $scope.confirmDelete = function(id,key) {
        var fbC = new Firebase(url + id +'/' + key);
        $scope.postToDelete = $firebaseObject(fbC);
        $('#deleteModal').modal();

    }

    $scope.deletePost = function() {

        var fbD = $scope.postToDelete.$ref();
        fbD.remove(function(error) {
            if (error) {
                console.log('Error:', error);
            } else {
                $('#deleteModal').modal('hide');
            }

        });
    }

$scope.editPost = function(id,key) {
        var fbE = new Firebase(url + id + '/' + key);

        $scope.postToUpdate = $firebaseObject(fbE);
        $('#editModal').modal();
        console.log($firebaseObject(fbE));
    }

    $scope.update = function() {

        var fbU = $scope.postToUpdate.$ref();
        console.log($firebaseObject(fbU));
        if($scope.postToUpdate.images == undefined){
            $scope.postToUpdate.images = null;
        }

        fbU.update({
            title:   $scope.postToUpdate.title,
            post:   $scope.postToUpdate.post,
            emailId:   $scope.postToUpdate.emailId,
            images: $scope.postToUpdate.images
        }, function(error) {
            if (error) {
                console.log('Error:', error);
            } else {
                $('#editModal').modal('hide');
            }
        });
    }

    $scope.confirmDelete = function(id,key) {
        var fbC = new Firebase(url + id +'/' + key);
        $scope.postToDelete = $firebaseObject(fbC);
        $('#deleteModal').modal();

    }

    $scope.deletePost = function() {

        var fbD = $scope.postToDelete.$ref();
        fbD.remove(function(error) {
            if (error) {
                console.log('Error:', error);
            } else {
                $('#deleteModal').modal('hide');
            }

        });
    }

---

希望它能帮助别人。

我在添加$scope.articles=$firebasearayfb.child$scope.Category时出错；错误如下：错误：Firebase.child失败：第一个参数是无效路径：未定义。路径必须是非空字符串，并且不能包含。、$、[、或]，我假设定义了$scope.Category，因为这是在$scope中使用的。AddPost$scope.Category是在AddPost controllerOk中定义的。嗯，你需要以某种方式获取类别才能访问你的帖子。如果不行，我想不出如何将类别发送到主控制器。我使用了更新函数，因为$save给了我一个错误。请给出更好的答案？？？