ng-click Erhöhungslimit funktioniert nur einmal und dann funktioniert nicht mehr nach dem Hinzufügen einer Zeile zu ng-repeat

Ich arbeite an einer ng-Wiederholung LimitTo Schaltfläche zu erhöhen. Mein Problem ist, dass es einmal funktioniert, wenn ich eine Zeile zu meinem Feed hinzufüge, aber dann scheint es wieder auf das ursprüngliche limitTo zurückzugehen und dann zu arbeiten.ng-click Erhöhungslimit funktioniert nur einmal und dann funktioniert nicht mehr nach dem Hinzufügen einer Zeile zu ng-repeat

Die app.js Datei

angular.module('app').controller('MyController', function($scope, $http) { 

$http.get('externaljsonfeed').success(function(data) { 
    // $scope.limit = 6; 
    // $scope.increasePosts = function() { 
    // $scope.limit += 3 ; 
    // } 
    $scope.posts = data; 

    var limitStep = 5; 
    $scope.limit = limitStep; 
    $scope.incrementLimit = function(add) { 
     $scope.limit += limitStep; 
    }; 
    $scope.decrementLimit = function(remove) { 
     $scope.limit -= limitStep; 
    }; 

});

});

Die html das Futter

<html lang="en" ng-app="app"> 
<body ng-controller="MyController">  
    <div class="row" flex-row> 
     <div class="small-up-1 medium-up-2 large-up-3"> 
      <div class="column" ng-repeat="posts in posts | filter:search | limitTo: limit"> 
       <div class="card"> 
        <div class="image"> 
         <a href="{{ posts.url }}" target="_blank"><img 
        src="{{ posts.image_thumbnail }}" alt="{{ posts.title }}" /></a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

Und dann die Taste zur Ausgabe der LimitTo

<button class="load-more-btn" ng-click="incrementLimit(add)">Discover More</button>

bearbeiten zu erhöhen:

Es jetzt richtig funktioniert.

Quelle

2016-06-24 Bknapp

Für 'incrementLimit (add)', 1) Warum haben Sie einen Parameter für eine Funktion, die Sie nicht verwenden und 2) warum übergeben Sie '$ scope.add', die Sie nirgends darauf setzen? –

Jetzt habe ich kein funktionierendes Beispiel vor mir, aber alle Variablen, die Sie in Ihrem Erfolgsmanager definieren, werden nicht mehr existieren, sobald die Funktion beendet wird.

Insbesondere könnte dies eine zu Problemen führen:

var limitStep = 5;

versuchen, etwas mehr in diese Richtung, die Funktionsdefinitionen trennen, müssen sie nicht in dem Erfolg Handler sein:

angular.module('app').controller('MyController', function($scope, $http) { 

    $scope.limitStep = 5; 
    $scope.limit = $scope.limitStep; 
    $scope.incrementLimit = function() { 
     $scope.limit += $scope.limitStep; 
    }; 
    $scope.decrementLimit = function() { 
     $scope.limit -= $scope.limitStep; 
    }; 

    $http.get('externaljsonfeed').success(function(data) { 
    $scope.posts = data; 
    }); 
}

Auch Denken Sie darüber nach, was die Argumente "add" und "remove" in den Funktionen incrementLimit und decrementLimit waren und wo sie definiert wurden, wenn überhaupt. (Ich habe sie aus meinem Code entfernt, weil ich denke, dass Sie sie überhaupt nicht brauchen).

Quelle

2016-06-24 16:28:20 Nirri

Hey, Vielen Dank für dieses Beispiel, wie Sie sagten, ich habe die Add-Funktion innerhalb der Erfolgs-Handler aufgerufen, so dass sie nach der ersten anfänglichen hinzufügen nicht funktionieren würde. – Bknapp

ng-click Erhöhungslimit funktioniert nur einmal und dann funktioniert nicht mehr nach dem Hinzufügen einer Zeile zu ng-repeat

Antwort

Verwandte Themen