ng-repeat issue with carousel: data remains stale and untouched

I am facing an issue with the slick carousel not updating with new data when I update the ng-repeat data in the slider from my controller.

<slick lazyLoad=ondemand init-onload=true slides-to-show=5 slides-to-scroll=1 next-arrow=".rightOne" prev-arrow=".leftOne" data="trailersUpcomming">
  <div index="$index " ng-repeat="trailer in trailersUpcomming ">
      <div class=" boxhover testimonialslider" style="margin-right: 12px; ">
          <div class="card " style="border-color: green; ">
              <div style="padding: 17px;text-align: left;height: 124px;background-color: #ffffff;">
                  <div>Release Date: {{trailer.releasedate}}</div>
                  <div>Language: {{trailer.filmlanguage}}</div>
                  <div>Rating: {{trailer.filmrating}}</div>
              </div>
          </div>
      </div>
  </div>
</slick>
javascriptangularjsslick.js

Answer №1

Consider modifying your array scope with the help of angular.copy

For further details, check out this example angular slick update example

Answer №2

In the location where you are in the process of updating your information, simply implement this:

$timeout(function(){
 //make necessary updates to your data here.
}

Answer №3

I encountered a similar issue where I was using an older version of Angular (1.4) along with a slider carousel. Upon page reload, the carousel was not updating with the latest data.

$('.slider').slick('reinit'); or $('.slider').slick('refresh'); 
did not work for me, so I had to manipulate the data being received from the server in the Angular client.

I managed to solve the issue with a workaround that may not be ideal, but it did the job for me. What I noticed was that the array used to display elements in the carousel would not update if its reference changed upon page reload. By directly assigning the data array to the target array, which displays elements in the Carousel, the issue was resolved.

To achieve this, I utilized the Push() method of arrays

for (let i=0; i < data.length ; i++) {
   var id = vm.targetArray.length + 1;
   if ( vm.targetArray.filter(item=> item.name == data[i].name).length == 0){
      vm.targetArray.push(data[i]);
      console.log("Pushed the item to targetArray : " + data[i].name);
   } 
}

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

Saving JSON values in Angular session storage

I am working with a php file that sends back JSON data after using a $http post method. You can see the json result here. Now, in my controller below, I want to save either `03-1314-00916` or `data[0]['student_number']` as a session in Angular s ...

javascriptphpangularjsjson

Tips for displaying the message "{"POWER":"ON"}" within the else if statement (this.responseText == ({"POWER":"ON"})) {

Hey everyone, I'm trying to adjust the color of a button on my webpage based on the response I receive from this.responseText. I understand the JSON response, but for some reason, I can't seem to incorporate it into my code. If anyone could lend ...

javascripthtmljson

encountering an error when attempting to send an HTTP POST request and

Trying to pass user information using http angularjs with PHP backend code. As a beginner, I have been searching for a solution to this issue for the past 2 days, trying various methods with no success. It seems like a simple problem, but I can't see ...

angularjs

How to implement Vue.js template into a different HTML document

I have successfully designed a template using vue.js. Now, I am seeking to utilize this template in another HTML file by referencing its template Id. For example, <div id="widgetId"></div> The template Id is labeled as widgetId. In this scen ...

javascriptvue.js

requiring a page reload for an AJAX-loaded webpage

Encountering an issue with a third-party integration on a website specifically designed for iPads, where multiple pages are loaded using AJAX. Upon visiting the page for the first time, the expected functionality is missing and only appears after refreshi ...

javascriptjqueryajaxipadonload

Struggling to pass two objects as props and have them be equated to one another

I have a scenario where I am passing a worker object as a prop to the view.vue field. In the mounted method of the component, I am trying to assign this worker object to the manager object. However, when I use the assignment `this.manager = this.worker`, i ...

javascriptvue.js

Why does the API in Next Js get triggered multiple times instead of just once, even when the strict mode is set to false?

React Query Issue I am currently facing an issue with React Query where the API is being triggered multiple times instead of just once when the selectedAmc value changes. I have tried setting strict mode to false in next.config.js, but that didn't so ...

javascriptreactjsnext.jsreact-query

Getting information from a database using PHP and AngularJS through the $http.get method

Currently, I am utilizing an AngularJS script to retrieve data from an external PHP file that is encoded in JSON within an HTML page. The method $http.get(page2.php) has been employed to fetch a JSON-encoded array located in another file. However, the issu ...

javascriptphpjsonangularjs

Should we consider using extra url query parameters as a legitimate method to avoid caching or enforce the updating of css/js files?

Is it acceptable to include extra URL query parameters in order to avoid caching or enforce the updating of CSS/JS files? /style.css?v=1 Or would it be preferable to rename the file/directory instead? /style.1.css I've heard that this could potent ...

javascripthtmlcsscachingserver

Are the Div Tags displaying in a vertical alignment instead of a horizontal one?

I have 3 div elements, each with a width of 4. I want to align them all in a row but I am also using a toggle button to show these divs because by default their display is set to none. When the user clicks the toggle button, the divs will be shown to them. ...

javascripthtmljquerycsstwitter-bootstrap

The processing of the HTTP service is halted until the data has been successfully returned

For my ongoing angularjs project, I have developed a service: (function () { "use strict"; angular.module("manageItems").factory("manageItemsService", ["$http", "config", manageItemsService]); function manageItemsService($http, config) { ...

angularjsangular-promiseangularjs-serviceangularjs-http

Initiate a build in bamboo by executing a npm script defined in package.json

I currently have the following setup in my package.json file. I am looking to initiate a bamboo build using npm scripts, which will run npm install first and then proceed with npm run bamboo. My goal is to ensure that the build fails if any of my test cas ...

angularjsnpmnpm-installbamboonpm-scripts

Suggestions for preventing the highlighting of the space between buttons on a webpage

html: <button id='automoney' onclick='minusTen()'></button> <button id='automoney2' onclick='minusHundred()'></button> <button id='automoney3' onclick='minusFiveHundred()& ...

javascripthtmlcss

The issue persists with angular.copy() failing to duplicate the array and selection sort algorithm malfunctioning

Hello everyone, I am currently new to AngularJs and engaged in an AngularJs project. There seems to be a problem with one of the code segments that I'm working on, and I would appreciate any assistance from your end. The issue at hand is related to t ...

arraysangularjscopy

Navigating with React Router using server-side routing in the web browser

I'm currently developing a web application that utilizes react on the client side and express on the server side. For routing the client pages, I've been using react-router (link). Initially, I had success using hashHistory, but now I want to ...

javascriptexpressreactjsreact-router

Incorporating external .js files from a different server using node.js

Is it possible to include .js files from another server into a node.js program? I cannot simply use require('./local_file.js') to fetch files over the Internet like this: require('http://www.server.com/path/file.js'); I attempted usin ...

javascriptnode.js

Run JavaScript code whenever the table is modified

I have a dynamic table that loads data asynchronously, and I am looking for a way to trigger a function every time the content of the table changes - whether it's new data being added or modifications to existing data. Is there a method to achieve th ...

javascripthtmlangulartypescript

Implement a trigger to activate toggling functionality

<span id="test">​click</span>​​​​​​​​​​​​​​ $('#test').toggle(function() { alert('true'); }, function() { alert('false'); }); $('#test').trigger('click') ...

javascriptjqueryhtml

What is the best way to fetch d3 data from a service?

I've been exploring a tutorial on creating charts with d3, which can be found at: When it comes to loading data for use in d3, I typically rely on the following code snippet: d3.tsv("data.tsv", type, function(error, data) { The file "data.tsv" is c ...

javascriptjqueryajaxd3.js

Using a variety of emojis simultaneously on one webpage

Recently, I incorporated the EmojiRating plug-in into my project for jquery emoticon rating. I am attempting to integrate it within an asp:DataList in order for it to repeat for each item. <asp:DataList ID="dtl1" runat="server" DataKeyField="QId" ...

javascriptc#jqueryasp.net