migrate the logic to the controller

Question

migrate the logic to the controller

can someone assist in rectifying the code issue? http://jsfiddle.net/rrnJc/

this module features a dynamic news list which can be scrolled through.

the current setback lies within the template logic:

<li ng-repeat="item in news" ng-show="$index >= currentPosition && $index <= (currentPosition + qntVisibleRecords)">

this needs improvement.

my aim is to have the visible section of the news list handled in the controller (via the function $scope.newsVisible). subsequently, this should be reflected and executed in the template as follows:

<li ng-repeat="item in newsVisible">
    <span class="date">{{item.date}}</span>

    <span class="title">{{item.title}} - {{$index}}</span>
</li>

javascript angularjs

Answer 1

Answer №1

To ensure your array of news is properly sliced, initialize the controller and call the changeCurrent function each time you iterate through newsVisible. Consider using the following code:

$scope.changeCurrent = function(value){
  $scope.currentPosition = $scope.currentPosition + value;
  if($scope.currentPosition < 0 ){
     $scope.currentPosition = 0;
  }
  var end = Math.min($scope.currentPosition + $scope.qntVisibleRecords, $scope.news.length)
  //make sure not to slice beyond news.length

  $scope.newsVisible = $scope.news.slice($scope.currentPosition, end);
}

You can also initialize this function when the controller is initialized to set up your array of newsVisible.

 $scope.changeCurrent($scope.currentPosition);

See it in action here: http://jsfiddle.net/rrnJc/1/

Answer 2

To ensure your array of news is properly sliced, initialize the controller and call the changeCurrent function each time you iterate through newsVisible. Consider using the following code:

$scope.changeCurrent = function(value){
  $scope.currentPosition = $scope.currentPosition + value;
  if($scope.currentPosition < 0 ){
     $scope.currentPosition = 0;
  }
  var end = Math.min($scope.currentPosition + $scope.qntVisibleRecords, $scope.news.length)
  //make sure not to slice beyond news.length

  $scope.newsVisible = $scope.news.slice($scope.currentPosition, end);
}

You can also initialize this function when the controller is initialized to set up your array of newsVisible.

 $scope.changeCurrent($scope.currentPosition);

See it in action here: http://jsfiddle.net/rrnJc/1/

migrate the logic to the controller

Answer №1

Similar questions

The $multiply function is only compatible with numerical data types, not arrays

What to do when the 'image' property in Next.js next/image has an implicit 'any' type and needs fixing?

Obtain the language of a Wordpress page using javascript

Removing Component Items in a Vue.js v-for Loop

Generating pages dynamically based on the number of divs

Is it possible to swap out images using srcset attribute?

How can I create clickable table entries using php and html?

Detecting hidden child divs due to overflow: hidden in Angular6

.NET Core ViewModel with IFormFile attribute causing AJAX Request to freeze

What is the best way to delete markers from a leaflet map?

Utilizing NGINX as a reverse proxy for secure communication with Node.js

Obtain the xlsx file transferred from a Node.js backend to an AngularJS frontend

Creating Global Variables in Node/Express Following a Post/Get Request

Oops! There seems to be an error in my code - it's expecting a semicolon. I'm currently working on developing an authentication system using credentials with next auth

Encountering an unusual hash code when implementing Google Tag Manager in a Next.js project was

Make an HTTP request to a different domain using AngularJS

Ensure jQuery waits until the function has completed execution

Having issues with jQuery when trying to select only a single checkbox?

The checkbox appears to be in an updated state, however, in reality, it has not been updated

What is the best way to include attributes in an HTML element?