选择特定项目并以模态查看，以使用angularJs

Question

我有（添加帖子）应用程序，用户可以从中将数据推送到firebase。用户从下拉列表中选择将在firebase中的Node并填写其他信息并提交给firebase的类别。

在视图中，我迭代数据以将其显示为分类，然后用户可以通过按下编辑/删除按钮来选择编辑/删除帖子。

我的问题：
    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);


}

}]);

这里包含模态的视图代码：

<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>

这里编辑并删除控制器：

'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);
}
}]);

这是截图视图的截图： Here a screenshot how the view is :

这是我的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时，此代码无效。

请帮忙。

更新解决方案

我通过添加addPost＆amp;的关键参数来修复此问题。 home.html中的模态中的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');
            }

        });
    }

希望它会对某人有所帮助。

Answer 1

您未在编辑和删除功能中考虑该类别。此外，您应该利用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);
    });
};

Answer 2

我通过添加addPost＆amp;的关键参数来修复此问题。 home.html中的模态中的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');
            }

        });
    }

希望它会对某人有所帮助。