Question

遇到我的页面上有重复DIV的问题，但是当我添加新行时，我得到了重复项。例如，如果我有行A和行B，然后我点击＆＃34;添加＆＃34;添加一个新行，我想看到3行。但是我得到5行，A行，B行，然后是行A，行B和新行C.

页面初始化很好，只会显示3行，但是我在做什么？＆＃34;添加＆＃34;新行...看起来并不像我想的那样令人耳目一新？

任何帮助都会很棒！谢谢！

我的ng-repeat看起来像这样：

<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>

使用全局数组实现上述婴儿的初始化：

$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);
            });
        });
     }

然后在＆＃34;＆＃34;添加＆＃34;单击按钮看起来像这样：

$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);
 }

Answer 1

在您的InfantList.on（）中，当您添加新值时，您将再次将所有值推送到数组。

要解决这个问题，请尝试：

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

这只会在添加新值时将新值推送到数组。

Angular - Firebase - 重复DIV ng-重复重复新行

1 个答案: