选择特定项目，并查看它在模式更新到火力地堡使用angularJs地堡、它在、火力、新到
我有（补充后）应用程序，它用户可以将其推数据火力点。用户从下拉列表中选择，这将是在火力和其他信息填充后的节点，并提交火力的类别。
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 .
在视图我迭代的数据同样显示该类别分开，并从那里用户可以选择编辑/删除由$ P $后pssing按钮编辑/删除。
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.
我的伊苏斯：结果 1 - 当用户删除帖子，全品类不会被删除，用户只是想删除的帖子。
My Issus : 1- When user delete a post , the whole Category is deleted not the post which the user just want to delete.
2 - 当用户点击编辑的假设包括来自帖子在提交的数据的模态弹出窗口，以及用户可以选择修改并提交。问题是显示在模态罢了。
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 .
下面的addPost控制器：
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);
}
}]);
下面的观点code，其中包括模态：
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 :
下面我火力地堡结构：
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"
在我做了下拉列表此实现，一切工作，甚至规则的每个用户都可以表现出他自己的数据与此code：
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);
在工作，但现在这个code不工作时，我用它作为FirebaseArray。
was working but now this code not working when i use it as FirebaseArray.
请帮忙。
Update解决方案
我添加了一个关键的参数addPost和放大器解决了这个问题; deletePost在home.html的模态，改变了editPost和更新的功能是这样的：
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.
推荐答案
我解决了这个问题添加了一个关键的参数addPost＆安培; deletePost在home.html的模态，改变了editPost和更新的功能是这样的：
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.
