Refreshing a query in the AngularJS REST resource

Is there a way to update the results of an AngularJS $resource query without refreshing the entire page?

Here is what my current page looks like:

<div class="container" ng-controller="AppController">
  <div ng-repeat="tile in items">
    <p>{{tile.name}}</p>
  </div>

  <button ng-click='??'> Reload tiles </button>

</div>

This is the controller I am using:

(function(angular) {
var AppController = function($scope, Item) {
Item.query(function(response) {
$scope.items = response ? response : [];
});
};

AppController.$inject = ['$scope', 'Item'];
angular.module("myApp.controllers").controller("AppController", AppController);
}(angular));

As a beginner with AngularJS, I have been struggling to find a solution to this problem. Any guidance or assistance would be greatly appreciated. Thank you!

Answer №1

To ensure data is loaded in your controller, create a function specifically for this task:

var AppController = function($scope, Item) {
    $scope.loadData = function(){
         Item.query(function(response) {
            $scope.itemsData = response ? response : [];
        });
    };

    $scope.loadData();
};

Incorporate the function into your button's functionality by simply calling it:

<button ng-click='loadData()'> Refresh Data </button>

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

Issue with Node.js express-session not retrieving myvar value (or generating a different sessionID)

After experimenting with express-session, I encountered an issue where I couldn't access any of my previously stored variables in the session. Additionally, I noticed that the session ID had changed. Can anyone explain why this is happening? This is ...

How can I create a new PHP table using data from an existing table?

I have a table displayed on my website with the code snippet providedview the table image here Here is the code for generating this table: <?php $query = $db->query("SELECT * FROM bit_exchanges ORDER BY id DESC LIMIT 20"); if($query-> ...

What is the significance of rendering models with a blade-colored using Three.js?

https://i.sstatic.net/BlZ6E.png Hey there, I've imported my model (obj + mtl + texture) but it appears with a different color. It's supposed to look like this: https://i.sstatic.net/9BwS9.png Currently, here's the scene configuration cod ...

Activated a DOM element that was retrieved through an AJAX request and displayed it inside a light

I want to implement a lightbox plugin (specifically lightbox_me) to display a html DOM element retrieved through an ajax request. This is the code I am using: <script src="script/jquery.lightbox_me.js"></script> <script> $(& ...

Emphasize table cells dynamically

Query How can I dynamically highlight a selected td? Codepen Example View Pen here Code Snippet The map consists of a randomly generated 2D array, like this: map = [[1,1,1,1,0], [1,0,0,0,0], [1,0,1,1,1], [1,0,0,0,1], [1,1, ...

"Exploring the power of Selenium with Chromedriver integration in a

Attempting to run integration tests using javascript for my application (Chrome being the browser of choice), I encountered an issue where Capybara failed to detect the Selenium driver. The testing environment consists of: Linux (Ubuntu 12.10) RoR 3.1 Rsp ...

Store array characteristics within a session

Here is a JavaScript function I'm working with: for (var i = 0; i < c.length; i++) { if (c[i].type == 'checkbox' && c[i].checked==true){ booked_seats[count]=c[i].id; c[i].parentNode.style.backgroundColor = "#F ...

The browser has blocked access to XMLHttpRequest from a specific origin due to the absence of the 'Access-Control-Allow-Origin' header in the requested resource

After developing an Asp.Net Core 3.1 API and deploying it on the server through IIS, everything worked fine when sending GET/POST requests from Postman or a browser. However, I encountered an error with the following code: $.ajax({ type: 'GET' ...

Exploring the depths of Master-Detail functionality with Ionic and Angular, unlocking nested

Hey there! I'm currently working on a project using Ionic and Angular, where users can view events and see all the attending participants along with their information. To achieve this, I implemented a master-detail pattern within another master-detail ...

Implementing restify on a website that mandates user login authentication

Currently, I am operating a REST API server using restify. In addition, my front-end consists of angularjs with html, css, and js files hosted on an Apache webserver. The next step is to implement user login authentication for this webapp. Access to the w ...

When a specific JavaScript function is triggered, the value of an HTML control will reset to its original default value

I have a form with a specific requirement. I need to allow users to input data in a text field and press enter, which should dynamically create new controls like another text field, a dropdown menu, and another text field using jQuery. While the functional ...

Is it possible to keep adding the keys of an array to themselves until reaching a specified limit

Given an array var ary = [5,10,28,50,56,280], I am exploring the idea of generating all possible combinations or subsets of this array until a certain threshold is reached. The objective is to store this limit in a variable and collect all the elements be ...

Older versions of Firefox are unable to detect a link that has been registered by the Vue event handler

Here is the HTML code that I am working with: <button id="btncontinue" ref="btncontinue" v-on:click="oncontinueclick" v-show="continuevisible"> <i class="fa fa-arrow-alt-circle-right fa-2x continue-icon" v-show="continuevisible"></i> &l ...

Are promises returned by all API functions in Protractor?

During my test run: browser.get('http://www.valid-site.com').then(function(msg){ console.log(msg); }); I was anticipating the output to be either 1 or true, signifying a successful operation since get() is supposed to return a promise with ...

Reversing the sequence of code in JavaScript - react native

I'm currently working on tracking the number of times a button is pressed within one second. For the most part, it's functioning correctly as it tracks and displays the count. The issue arises when it displays the button press count from the pr ...

How to Extract a URL from an Anchor Tag without an HREF Attribute Using Selenium

How can I make a link, which normally opens in a new window when clicked, open in the current window instead? The link does not have an href attribute, only an id and a class. For example: <a id="thisLink" class="linkOut">someLinkText</a> I r ...

Despite adding app.use(flash()) to resolve the issue, the error 'TypeError: req.flash is not a function' persists

I encountered an error in my routes.js file: app.get('/login', function(req, res) { // Display the page and include any flash data if available res.render('login.html', { message: req.flash('loginMessage') }); }); ...

Is it necessary for the changeState to be reverted when initiating an UNDO_ONE action to reverse an optimistic delete in @ngrx/data?

Check out the code on StackBlitz When performing an optimistic delete using @ngrx/data, such as removing our Hero "Ant-Man," it impacts the changeState in the following way: { "entityCache": { "Hero": { "ids": [1, 2, 3, 5, 6], "entities ...

The chart is failing to update with the data it obtained through Jquery

Scenario: I want to populate a chart using data fetched by Jquery. $.getJSON("/dashboard/", function(data, status) { var test_data=data console.log(test_data) chart.data.datasets[0].data=test_data; ...

Transmit information to Flask server using an AJAX POST call

I'm completely new to Ajax requests. I'm trying to send data from a webpage to my Flask backend using an Ajax request, but I can't get anything to show up in the backend: Here is the request code I am using: function confirm() { cons ...