CODEWITHSUNDEEP
javascriptangularjsangularfire
Roy Barber
Roy Barber

Reputation: 312

Updating fields with angularfire

Im trying to build a really simple lateness tracker with AngularFire. Ive got the miniApp adding staff members ok and setting the initial late minutes to 0 value.

But im stuck on updating the values. When a user clicks 'plus()' it should add 1 to the value, when a user clicks 'minus()' it should remove 1 from the value and finally when you click 'resetMins()' it should set the value back to 0.

View:

<div class="row">

<div class="col-sm-4" ng-repeat="late in lateness">
    <h1>{{late.name}}</h1>
    <h2>{{late.mins}}</h2>
    <span>Mins Lateness</span>
    <div ng-show-auth="">
        <button ng-click="minus()" name="minus">-</button>
        <button ng-click="plus()" name="plus">+</button>
        <div>
            <button ng-click="resetMins()">Reset</button>
        </div>
    </div>
</div>

Controller:

angular.module('goskirmishApp').controller('MainCtrl', function ($scope, fbutil, $timeout) {

// synchronize a read-only, synchronized array of messages, limit to most recent 10
$scope.lateness = fbutil.syncArray('lateness', {});

// display any errors
$scope.lateness.$loaded().catch(alert);

function alert(msg) {
  $scope.err = msg;
  $timeout(function() {
    $scope.err = null;
  }, 5000);
}

// Reset mins
$scope.resetMins = function() {
    console.log('reset Clicked'); 
};

$scope.minus = function() {
  console.log('minus Clicked');    
};

$scope.plus = function() {
  console.log('plus Clicked');    
};

});

Can someone help me get on the right track please?

Upvotes: 0

Views: 207

Answers (2)

FPcond
FPcond

Reputation: 591

ok so I think this might help further the solution I think New Dev did an excellent job.

One way I solved this was to use input type="number" and then have a button that would save/submit to firebase.

Here is an example using your situation.

<div ng-repeat="late in lateness">
   {{late.name}}
   <input ng-model="late.number" type="number" min="0">
   <button ng-click="save()" name="save">save</button>
</div>

Put in your JS

app.constant('FIREBASE_URI', 'https://YOURAPP.firebaseio.com');

app.controller('Late', ['$scope', '$firebase', 'FIREBASE_URI', function ($scope, $firebase, FIREBASE_URI) {
    var Lateref = new Firebase(FIREBASE_URI + "/LateWorkers");
    var Latesync = $firebase(Lateref);
    $scope.LateList = Latesync.$asArray();

    $scope.save = function () {
        $scope.LateList.$add(angular.copy($scope.Late));
    };
}]);

I hope this helps

Upvotes: 0

New Dev
New Dev

Reputation: 49600

You could pass late to your controller functions:

<div ng-repeat="late in lateness">
   ...
   <button ng-click="minus(late)" name="minus">-</button>
   <button ng-click="plus(late)" name="plus">+</button>
</div>

and in your controller:

$scope.minus = function(lateObj) {
  lateObj.mins--;    
};

Or you could just do so inline:

<button ng-click="late.mins++" name="minus">-</button>

Upvotes: 0

Related Questions