Angular- wyświetlanie danych z tablicy

pytanie zadane 5 maja 2023 w JavaScript przez mm Użytkownik (890 p.)

Cześć,

Po pobraniu danych z bazy w moim frontendzie w Angularze chciałabym wyświetlać dane w ten sposób, że wyświetlam pierwsze trzy odpowiedzi, które są umieszczone w tablicy. Po naciśnięciu przycisku wyświetlają się trzy kolejne i tak dalej. Dodam, że użyłam relacyjnej bazy danych. Aby to wyświetlić użyłam w Angularze ngIf:

*ngIf="ques.questionId===ans.questionID"

Gdzie questionId i questionID to są klucze używane w relacji tych dwóch tabel, ale niestety to nie działa.

W jaki inny sposób można to rozwiązać?

komentarz 5 maja 2023 przez Wiciorny Ekspert (269,710 p.)

pobrać z bazy dane które spełniają warunek klucza i zamiast ng_if wyswietlac te dane.

komentarz 5 maja 2023 przez mm Użytkownik (890 p.)

Ok, czyli do każdych trzech odpowiedzi pisać osobną funkcję? Bo ja te wszystkie dane, które są pobrane z bazy potrzebuje w tym widoku. Tylko po wciśnięciu przycisku mają się wyświetlać kolejne.

1 odpowiedź

odpowiedź 6 maja 2023 przez VBService Ekspert (253,100 p.)
edycja 6 maja 2023 przez VBService

Może spróbuj za pomocą ng-show ustawić zakres dla "widzianego" indeksu (indeksów) np.

ng-repeat="question in questions"
ng-show="( $index >= first_visible && $index <= last_visible )"

     app.controller('questionsCtrl', function($scope, $http) {
        $http.get('https://jsonplaceholder.typicode.com/albums')
          .then(function (response) {
          $scope.questions = response.data;
          $scope.first_visible = 0;
          $scope.last_visible = 2;
        });

       // ...
     )};

i za pomocą np.

      <button ng-click="moveBack()">Back</button>
      <button ng-click="moveForward()">Forward</button>

"przesuwać" zakres

        $scope.moveBack = function() {
          if ($scope.first_visible >= 3) {
            $scope.first_visible -= 3;
            $scope.last_visible -= 3;
          }
        };
        $scope.moveForward = function() {
          if ($scope.last_visible + 3 < $scope.questions.length) {
            $scope.first_visible += 3;
            $scope.last_visible += 3;
          }
        };

przykład on-line ( plik użyty w przykładzie ).