CODEWITHSUNDEEP
javascriptangularjsfirebaseangularfire
Chris
Chris

Reputation: 5804

How to instantly update an item within a list of data with firebase and angularfire?

I have the following code that produces a list of items from firebase, where I can update each item by clicking a button. But I'd like to update a specific item within the list instantly using $bind instead of having to click submit everytime.

I'm currently updating the list with the below script (jsfiddle here: http://jsfiddle.net/chrisguzman/ryuvg6bz/) which requires the user to press submit, but I'd like it to be instant for item within the list

HTML

<section ng-app ="myapp" ng-controller="MyController">

<div ng-repeat= "(id,item) in data">
        <input ng-model="item.comment"></input>
        <button type="submit" ng-click="AddComment(id)">Comment</button>
</div>

</section>

Javascript

angular.module("myapp", ["firebase"])
    .controller('MyController',function MyController($scope, $firebase) {
    var ref = new Firebase("https://helloworldtest.firebaseio.com");

    $scope.data = $firebase(ref);


    $scope.AddComment = function (id) {
        $scope.data.$save(id)}


});

My attempt is the following

<section ng-app ="myapp" ng-controller="MyController">

<div ng-repeat= "(id,item) in data">
        <input ng-model="item.comment"></input>
</div>

</section>

Javascript 

angular.module("myapp", ["firebase"])
    .controller('MyController', function MyController($scope, $firebase) {
    var ref = new Firebase("https://helloworldtest.firebaseio.com");

    $scope.data = $firebase(ref);

    function (id) {
        var ref = new Firebase("https://helloworldtest.firebaseio.com/" + id + "/comment");
        $firebase(ref).$bind($scope, "comment");

    }


});

Upvotes: 0

Views: 551

Answers (1)

runTarm
runTarm

Reputation: 11547

You could use ng-change to save the data immediately like this:

<div ng-repeat="(id,item) in data">
    <input ng-model="item.comment" ng-change="AddComment(id)"></input>
</div>

Example JSFiddle: http://jsfiddle.net/snk9Ld23/1/

Upvotes: 1

Related Questions