Skip to content

Instantly share code, notes, and snippets.

@dustinsmith1024

dustinsmith1024/remove.js

Last active June 3, 2016 10:49
Show Gist options
  • Save dustinsmith1024/9155331 to your computer and use it in GitHub Desktop.
Save dustinsmith1024/9155331 to your computer and use it in GitHub Desktop.
Download ZIP
AngularFire Remove Examples
Raw
remove.js
;<!doctype html>
<html ng-app="myapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.6.0/angularfire.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.firebase.com/css/example.css">
</head>
<body ng-controller="MyController">
<div id="messagesDiv">
<div ng-repeat="(id, msg) in messages"><em>{{msg.from}}</em>: {{msg.body}}
<a ng-click="messages.$remove(id)">lete</a>
</div>
</div>
<input type="text" ng-model="name" placeholder="Name">
<input type="text" ng-model="msg" ng-keydown="addMessage($event)" placeholder="Message...">
<script>
var app = angular.module("myapp", ["firebase"]);
function MyController($scope, $firebase) {
var ref = new Firebase("https://th9gcxvk9q5.firebaseio-demo.com/");
$scope.messages = $firebase(ref);
$scope.addMessage = function(e) {
if (e.keyCode != 13) return;
var m = $scope.messages.$add({from: $scope.name, body: $scope.msg});
m.then(function(data){console.log(data);});
$scope.messages.$save
$scope.msg = "";
}
}
</script>
</body>
</html>
With orderByPriority
;<!doctype html>
<html ng-app="myapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.6.0/angularfire.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.firebase.com/css/example.css">
</head>
<body ng-controller="MyController">
<div id="messagesDiv">
<div ng-repeat="msg in messages | orderByPriority"><em>{{msg.from}}</em>: {{msg.body}}
<button ng-click="removeMessage(msg.$id)">--</button>
</div>
</div>
<input type="text" ng-model="name" placeholder="Name">
<input type="text" ng-model="msg" ng-keydown="addMessage($event)" placeholder="Message...">
<script>
var app = angular.module("myapp", ["firebase"]);
function MyController($scope, $firebase) {
var ref = new Firebase("https://th9gcxvk9q5.firebaseio-demo.com/");
$scope.messages = $firebase(ref);
$scope.addMessage = function(e) {
if (e.keyCode != 13) return;
var m = $scope.messages.$add({from: $scope.name, body: $scope.msg});
m.then(function(data){console.log(data);});
$scope.messages.$save
$scope.msg = "";
}
$scope.removeMessage = function(e) {
console.log(e);
$scope.messages.$remove(e);
}
}
</script>
</body>
</html>
@sutin1234
Copy link

if want to remove data in firebase i will use $id or $index

@Samanmov
Copy link

Samanmov commented Jun 3, 2016

I was try your code for delete but It deleted all of my obj in database :(

I find the way that you can only delete one obj .

.controller('bloggCtrl', function($scope, Blogg){
    $scope.recs = Blogg.all;
   $scope.remove = function(id) {
                var rem = $scope.recs.$getRecord(id);
                $scope.recs.$remove(rem);
                return true;
            }
})

services.js

.factory('Blogg', function($firebaseArray){
  var ref = new Firebase('https://calapp.firebaseio.com');
  //return $firebaseArray(ref);
  var recs = $firebaseArray(ref);
  var Blogg = {
        all: recs,
        get: function(itemId) {
            return recs.$getRecord(itemId);
        }        
    };
    return Blogg;
})

<ion-view view-title="Blogg">
    <ion-content>
        <div ng-controller="bloggCtrl"> 
            <ion-list > 
                <ion-item ng-repeat="item in blogg" ui-sref="meny.singleItem({id:item.$id})" class="item-remove-animate item-avatar item-icon-right" type="item-text-wrap">
                    <img ng-src="{{item.img}}">
                    <h3>{{item.title}}</h3>
                    <p>{{item.date}}</p>
                    <h4>{{item.author}}</h4>
                    <p>{{item.paragraph}}</p>
                    <i class="icon ion-chevron-right"></i>
                    <ion-option-button  class="button-assertive icon-left ion-ios-trash" ng-click="remove(item.$id)">Ta bort
        </ion-option-button>
                </ion-item>
            </ion-list>
        </div>
        <div class="row row-bottom">
              <div class="col col-33 col-offset-80">
                  <button class="button button-icon ion-plus-circled" id="buttonicon" ui-sref="meny.add" ></button>
              </div>

        </div>
    </ion-content>
 </ion-view>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment