CODEWITHSUNDEEP
angularjsfirebase
Alan Power
Alan Power

Reputation: 341

Angular - Firebase - Repeating DIV ng-repeat duplicating new rows

In running into a problem where I have a repeating DIV on my page, but I am getting duplicates when I add new rows. So for example if I have Row A and and Row B, and then I click "Add" to add a new row, I would like to see 3 rows. However I get 5 rows, Row A, Row B, then Row A, Row B and the new Row C.

The page initializes fine, will display only the 3 rows, but what am I doing wrong with the "Add" of new rows...It appears to be not refreshing as I would like?

Any help would be great! Thanks!

My ng-repeat looks like this:

<div ng-repeat="infant in Infants" class="list card">
    <h2>{{infant.name}} - {{infant.ID}}</h2>
    <a class="item item-icon-left assertive" href="#"> <i class="icon ion-ios-analytics"></i> Last measurement 188mm / 190mm (size 5.5) </a>
</div>

The initialisation of Infants above is achieved with a global array:

$scope.Infants = [];

...

    if (firebaseUser) {
        //set the user and infant list variables
        $log.log("Signed in as:", firebaseUser.uid);
        var usersRef = firebase.database().ref('users');
        loggedInUser = usersRef.child(firebaseUser.uid);
        loggedInUser.on('value', snapshot => {
            $log.log("UserDetails:", snapshot.val());
        });
        InfantList = loggedInUser.child('infantList');
        InfantList.on('value', snapshot => {
            $log.log("InfantDetails:", snapshot.val());
            angular.forEach(snapshot.val(), function (value, key) {
                $log.log("val", value);
                $log.log("key", key);
                $scope.Infants.push(value);
            });
        });
     }

Then the function call when the ""Add" button is clicked looks like this:

$scope.AddProfile = function () {
    // get the firebase location
    var newInfantRef = firebase.database().ref('/users/' + firebaseUser.uid + '/infantList/');
    // create the element
    var newRef = newInfantRef.push();
    //add attributes
    var newItem = {
        riskLevel: '1.0'
        , ID: newRef.key
        , name: "Reggie"
        , gender: "M"
        , DOB: "2015-02-01"
    };
    // Write the new infant.
    var newInfant = {};
    newInfant['/' + newRef.key + '/'] = newItem;
    newInfantRef.update(newInfant);
 }

Upvotes: 0

Views: 69

Answers (1)

Gerard Romero
Gerard Romero

Reputation: 76

In your InfantList.on() you are pushing again all values to the array when a new value is added.

To solve this try:

    InfantList.on('child_added', snapshot => {
           ...your things...
    }

This only push the new value to the array when the new value is added.

Upvotes: 1

Related Questions