问题
I have (add post) app which user can push data to firebase from it . User choose from dropdown list the category which will be Node in the firebase and after fill in the other info and submitted to firebase .
In the view i iterate the data to show it as Category separated and from there the user can choose to edit/delete the post by pressing the button edit/delete.
My Issus :
1- When user delete a post , the whole Category is deleted not the post which the user just want to delete.
2- when user click edit the modal popups which suppose to include the data filed in from the post , and user can chose to change and submit. The problem is nothing is shown in the modal .
Here the addPost controller :
$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);
}
}]);
Here the view code which include the modal :
<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">×</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>
Here the Edit and delete Controller :
'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 : Here a screenshot how the view is :
Here my Firebase structure:
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"
Before i made this implementation with the dropdown list , everything was working even the rule the every user can show his own data with this code :
var fbObj = fb.startAt($scope.username).endAt($scope.username);
was working but now this code not working when i use it as FirebaseArray.
Please help.
UPDATE SOLUTION
I fixed this with added a key argument to addPost & deletePost in the modal in home.html and changed the editPost and update function like this :
$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');
}
});
}
Hope it will help someone.
回答1:
You're not accounting for the category in your edit and delete functions. Also, you should take advantage of the functions AngularFire provides for you instead of creating new variables everywhere.
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);
});
};
回答2:
I fixed this with added a key argument to addPost & deletePost in the modal in home.html and changed the editPost and update function like this :
$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');
}
});
}
Hope it will help someone.
来源：https://stackoverflow.com/questions/33029200/select-specific-item-and-view-it-in-modal-to-update-into-firebase-using-angularj