CODEWITHSUNDEEP
angularjsfirebase
irth
irth

Reputation: 1716

Getting a Firebase reference from Angular repeat

Just about done with an AngularFire CRUD app. My problem is figuring out how to dynamically generate a firebase reference for the item in repeat so I can .remove() it. Thought maybe ' this ' would be effective but isn't. I'm able to push and edit, just stuck on how to remove content in ng-repeat.

Thanks,

App is here: http://powerful-stream-7060.herokuapp.com/#/admin

HTML

        <div id="team" ng-hide ng-repeat="teamMember in team">
            <h4><div ng-model="teamMember.name" contentEditable>{{teamMember.name}}</div></h4>
            <code><div ng-model="teamMember.imgUrl" contentEditable>{{teamMember.cost | noFractionCurrency}}</div></code>
            <p><div ng-model="teamMember.position" contentEditable></div></p>
            <button ng-click="removeItem()" style="color:red;">[x]</button>
        </div>

JS

        var teaUrl = new Firebase("https://eco-grow.firebaseio.com/team");
        angularFire(teaUrl, $scope, "team");
        $scope.teammate = {};
        $scope.teammate.name = "";
        $scope.teammate.position = "";
        $scope.teammate.imgUrl = "";

        $scope.scout = function() {
             teaUrl.push($scope.teammate);
        }
        $scope.removeItem = function () {
            $scope.ref().remove(this);
        };

Upvotes: 1

Views: 817

Answers (4)

Yogev Levy
Yogev Levy

Reputation: 335

You can use the container of the item, like in the example in the AngularFire Quickstart (click on the "index.html"):

<button ng-click="team.$remove(teamMember)">Delete team member</button>

Upvotes: 0

Kyle Cureau
Kyle Cureau

Reputation: 19366

This is how I do it. Seems cleaner, but I like the $index proposed earlier.

<div id="team" ng-hide ng-repeat="(ref, teamMember) in team">
      <button ng-click="removeItem(ref)" style="color:red;">[x]</button>
</div>

Upvotes: 1

Bro
Bro

Reputation: 483

Assuming team is an array of teammate objects, you should be able to splice the teammate item out of the array as long as $scope.team is still bound. You may have to pass the ngRepeat $index of the item. $scope.removeItem = function (itemindex) { $scope.team.splice(itemindex,1); };

Also note that angularFire is asynchronous and returns a promise, and $scope.team may may still be empty at the time your other functions are declared. You may want to use angularFire(teaUrl, $scope, "team").then(function(cb){ do stuff with $scope.team & cb() to unbind})

Upvotes: 2

Prasad K - Google
Prasad K - Google

Reputation: 2584

You can remove item by using its index passed to removeItem method as shown below:

<div id="team" ng-hide ng-repeat="teamMember in team">
            <h4><div ng-model="teamMember.name" contentEditable>{{teamMember.name}}</div></h4>
            <code><div ng-model="teamMember.imgUrl" contentEditable>{{teamMember.cost | noFractionCurrency}}</div></code>
            <p><div ng-model="teamMember.position" contentEditable></div></p>
            <button ng-click="removeItem({{$index}})" style="color:red;">[x]</button>
        </div>

and delete the item from team array. 

$scope.removeItem = function (index) {
            $scope.team.splice(index, 1);
        };

Upvotes: 1

Related Questions