Syntax for ng-repeat utilizing angular-ui-scroll with (key, value)

I am currently exploring ways to improve the performance of a large table that I am rendering. During my research, I stumbled upon an intriguing solution called angular-ui-scroll which I am eager to experiment with.

In order to populate my table, I am utilizing the key-value accessor on my ng-repeat, as shown below:

<tr ng-repeat="(key, value) in vm.stopTimes track by key">
    <td class="timetable-detail-stop" layout="row" flex layout-align="start center">
        {{ vm.expandedTimetable.stops[key].name }}
    </td>
    <td ng-repeat="departure in value.times track by $index">
        {{departure.time}}
    </td>
</tr>

My concern is whether I can apply this key-value syntax from ng-repeat when using ui-scroll. After carefully reviewing the documentation, I am uncertain if it is feasible.

Have any of you attempted to accomplish this using keyed objects or dictionaries? Your insights would be greatly appreciated!

Thank you

angularjsangularjs-ng-repeatui-scroll

Answer №1

If we discuss the concept of virtualizing table rows, it might appear as follows:

<div style="height: 500px; overflow: auto;" ui-scroll-viewport>
  <table>
    <tr ui-scroll="item in vm.datasource">
      <td class="timetable-detail-stop">
        {{ vm.expandedTimetable.stops[item.key].name }}
      </td>
      <td ng-repeat="departure in item.value.times track by $index">
        {{departure.time}}
      </td>
    </tr>
  </table>
</div>

In this scenario, the datasource is an object that contains a get method. When called (via the success callback), the get method returns an array of items based on the provided index and count parameters:

this.datasource = {
  get: function(index, count, success) {
    var result = [];
      for (var i = index; i <= index + count - 1; i++) {
        var stopTimeKey = this.getStopTimeKeyByIndex(i);
        result.push({
          key: stopTimeKey,
          value: this.stopTimes[stopTimeKey]
        });
      }
    success(result);
  }
}

It is important to note that here we assume that the stopTimes key can be obtained using the index. The simplest way to implement the getStopTimeKeyByIndex method is:

this.getStopTimeKeyByIndex = function(index) {
  var keys = Object.keys(this.stopTimes);
  return keys[index];
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Attempting to connect to REST server using angularjs $resource. Unexpectedly, the success callback does not

After attempting to set up a REST server on Nodejs and accessing it from AngularJS using $resource for the first time, I have encountered some issues... In my controller, I am trying to load a JSON object (shopping cart) upon login for existing users or c ...

javascriptnode.jsangularjsrestify

UI Grid Experiencing Subpar Vertical Scroll Performance

I've recently started using the updated Angular UI Grid v3.0.7, and I'm facing a challenge with vertical scrolling when implementing a custom cell template. In my grid, there are 15 columns and 83 rows, which is not considered a large dataset. Th ...

angularjsangular-ui-grid

Trouble with REGEX functionality in AngularJS?

I have a code snippet where I am attempting to validate an email and phone number. However, for some reason it is not functioning as expected. I am wondering if there is a specific file that needs to be included in my code. <html ng-app="myApp"> < ...

regexangularjs

Display tables based on selected changes with dynamically changing options

My HTML structure displays rows with active and inactive statuses based on a select change, and it's currently functioning correctly. However, the project requirements have changed, allowing for more status options besides just active and inactive. I ...

javascripthtmlangularjs

Unable to pass the $rootScope variable to the following function in AngularJS 1.x

I'm facing an issue that I can't seem to solve. It appears that a variable in $rootScope is not being assigned when I call the next function, but isn't that the purpose of a Promise (.then)? I am using AngularJS v1.6.4 and NodeJS, however, ...

angularjsangularjs-rootscope

angular.js watch() method is not functioning properly during a JSON call

I am trying to trigger a method whenever the value of my $http.selectedSong (model value) changes, but for some reason it is not working. Any ideas on why this could be happening?: app.controller('songController', ['$http', function($h ...

javascriptjsonangularjs

Could someone elaborate on the fundamental idea behind models in AngularJS?

HTML Markup: <mydirective></mydirective> <input type="button" ng-click="showText()" value="Show Service Text" /> Javascript Code: var app = angular.module('demo', []); app.service('myService', function () { ...

angularjsangularjs-directiveangularjs-scopeangularjs-serviceangular-directive

Tips on implementing the ng-ckeditor directive within an AngularJS application

After following these steps : Ran 'bower install ng-ckeditor' Inserted <script src="bower_components/ng-ckeditor/ng-ckeditor.js"></script> into index.html Added in app.js like angular.module('MyApp',['ngCkeditor' ...

angularjsckeditor

Golden Layout | Oops! This element is already being used to bootstrap another app

While working with goldenlayout and angularJS, I encountered the following error message: Error: ng:btstrpd App Already Bootstrapped with this Element This error occurred when running the following line of code: myGoldenLayout.on('initialised' ...

angularjsgolden-layout

Ways to determine the presence of a value in an array using AngularJs

I'm currently working on looping through an array to verify the existence of email, phone, and alternate phone in a database. My challenge lies in finding a suitable function or workaround in AngularJS that allows me to iterate through the array with ...

javascriptangularjsarrays

AngularJS directive that rounds numbers to two decimal places

I am looking to develop a custom directive that rounds off two-digit values after the decimal point. For instance: 10.456456 will be rounded to 10.46 10.3633 will be rounded to 10.34 Here is my current attempt at the directive, but it seems to be ineffe ...

angularjs

Learn how to display HTML content in trNgGrid using the $sce.trustAsHtml method

I am currently working with a table that has search options implemented using trNgGrid.js. The data for this table comes from a Sharepoint list where one of the columns contains HTML content that I need to display. To achieve this, I attempted using $sce. ...

javascriptjqueryhtmlangularjs

Which one relies on the other: angular-data or angular-cache?

I'm struggling to get angular-cache set up properly. According to the documentation: Angular-cache is a dependency of angular-data and must be loaded before angular-data if you are using angular-data. That's all well and good, but what if I only ...

javascriptangularjscaching

How can elements be collapsed into an array using the Reactive approach?

Consider this TypeScript/Angular 2 code snippet: query(): Rx.Observable<any> { return Observable.create((o) => { var refinedPosts = new Array<RefinedPost>(); const observable = this.server.get('http://localhost/ra ...

jsonangularjstypescriptreactive-programmingrxjs

I encountered an error in my Node.js application stating that it could not find the name 'Userdetailshistory' array. I am puzzled as to why this error is occurring and I suspect it may be due to my

import { Component, OnInit } from '@angular/core'; import { UserdetailshistoryService } from '../../services'; @Component({ selector: 'my-userdetailshistory', templateUrl: './userdetails-history.component.html', ...

angularjsangulartypescript

Error: Unable to access the 'TEXT_TYPE' property because it is undefined in the BarcodeScanner

I've been utilizing Ionic alongside BarcodeScanner, which can be located here. Here is my code snippet for encoding a piece of text: $scope.GenerateBarcode = function () { $cordovaBarcodeScanner.encode($cordovaBarcodeScanner.Encode.TEXT_TYPE, "1" ...

angularjscordovaionic-framework

`In AngularJS, the same URL ('/') can display different templates depending on the user's login status.`

What is the most effective way to configure routing and templates in AngularJS to display a distinct front end and login area for visitors, while presenting a dashboard to logged-in users all on the same base URL ('/')? These two pages have comp ...

javascriptangularjs

is it possible to use jquery event listeners on a webpage that uses angular.js?

We are currently working on a page that utilizes angular.js, incorporating ng-scope classes and ng-click attributes within several <tr> elements. To enhance the functionality of the page post-implementation, we are considering using greasemonkey. Sp ...

jqueryangularjs

UI Datepicker experiencing issues when setting a minimum date

Currently, I am utilizing AngularJS with a datepicker setup as follows: <div ng-controller="MyController as vm"> <div class="small-8 columns right-align"> <input id="dateFrom" type="text" name="FromDate" ...

jqueryangularjsdatepickerangular-ui

AngularJS modal not functioning properly after sending $http request

I have successfully implemented a pop-up modal in my Angular page using code from a reliable source. However, when I include a button for an HTTP request on the same page, the functionality of the AngularJS modal stops working after the HTTP request is mad ...

javascriptjqueryangularjstwitter-bootstrap