Issue with AngularJS ng-repeat and ng-show not functioning properly upon page reload

Hey there! I'm facing an issue with my web application that I built using AngularJS and Spring. This platform allows users to post messages, and I've written the following code in my Angular controller.

<div class="row" ng-repeat="message in messages">
                <div class="col-md-4 mb" style="margin-left: 40px;">
                    <div class="darkblue-panel pn">
                        <div class="darkblue-header">
                            <h5>{{messages.message}}</h5>
                        </div>
                        {{messages.creator}} {{messages.date | date:'dd.MM.yy'}}
                        <br/>
                        <div ng-show="'{{messages.creator}}'=='{{settingsAccount.login}}'">
                            <button type="submit"
                                    ng-click="update(messages.id)"
                                    class="btn btn-default">
                                <span class="glyphicon glyphicon-pencil"></span> Edit
                            </button>
                            <button type="submit"
                                    ng-click="delete(messages.id)"
                                    class="btn btn-danger">
                                <span class="glyphicon glyphicon-remove-circle"></span> Delete
                            </button>
                        </div>
                    </div>
                </div>
            </div>

I have noticed that the ng-show line is responsible for displaying the edit and delete buttons only to the creator of a message. Everything works perfectly until I refresh the page. After refreshing, the message is displayed but the buttons disappear.

Even though the values (messages.creator and settingsAccount.login) remain the same, it seems like the ng-show condition is not being checked after the page refresh. Strangely, when I paste a new message, the condition is evaluated and I can edit both the old and new messages.

Can someone help me figure out how to solve this problem? Why does the ng-show condition fail to work after a page refresh? Is the ng-repeat executed differently after a refresh?

Answer №1

I managed to come up with a resolution. Whenever I refresh, the Session values are lost. To overcome this issue, I have decided to utilize localStorage or Cookies that I set up at the start.

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

The Kendo grid row mysteriously vanished while trying to edit it immediately after inserting a new row

I have configured a Kendo grid in the following manner, but I am encountering an issue where after adding a row, it disappears when I attempt to edit it before sending the changes to the server. However, upon refreshing the page, the row reappears. Any i ...

Refresh div content dynamically with anchor tag in place

I have a dilemma with the following div that contains an anchor tag linking to a php script responsible for updating information in a database and returning to this page. My goal is to execute this php script by clicking on the anchor tag, update the datab ...

Is there a way to update a single element within an array without triggering a refresh of the entire array?

Is there a way to prevent the component from rerendering every time new data is input? I attempted to memoize each cell but I am still facing the same issue. Any suggestions on how to accomplish this? import React, { useState, memo } from "react&quo ...

How can we capture and execute a function on the server in Next.js in response to a user's request for the index page (/)?

Is it possible to use a middleware function or another method in Next.js to check if a user is trying to access the home page? My goal is to intervene when a user tries to reach the home page. Intercepting a URL request is quite straightforward with Next. ...

Implementing modifications to all HTML elements simultaneously

In my HTML document, there are around 80 small boxes arranged in a grid layout. Each box contains unique text but follows the same structure with three values: name, email, and mobile number. I need to switch the positions of the email and mobile number v ...

Can the mui dialog actions button be activated using CTRL + S?

Is it feasible to enable my users to save content in a MuI dialog by pressing CTRL + S? ...

The var_dump($_POST) function is not displaying any results after submitting the form to the CodeIgniter controller

Can someone assist with my jQuery code? $(document).on("click", ".addthisone", function (e) { var file_data = $(this).parent().parent().parent().find('input[type=file]').prop("files")[0]; console.log(file_data); var form_data = new F ...

Guide on retrieving JSON information through an AJAX request within an AngularJS Bootstrap modal

I am eager to implement the following functionality: a button that triggers a dialog/modal from Angular Bootstrap which showcases a loading indicator as the application retrieves JSON data from the server. Once the data is fetched, it should be displayed w ...

Determining the elapsed time using Momentjs

I need assistance with a NodeJS project where I am trying to determine if a specific amount of time (like 1 hour) has passed since creating an object. My project involves the use of MomentJS. For example, if moment(book.createdAt).fromNow() shows 2 hours ...

What steps should I take to resolve a plugin error specifically related to index.js while using Cypress?

I am encountering an error in Cypress A plugin has thrown the following error, causing our tests to stop running due to a plugin crash. Please verify your plugins file (/home/dev2/Desktop/kavitaSeffcon/CypressProject/cypress/plugins/index.js) Error: ENOE ...

Should you hold off on moving forward until the asynchronous task finishes?

My goal is to retrieve location coordinates using the Google Maps JavaScript API in an asynchronous manner. Below is the function I've created for this purpose: function fetchCoordinates(address) { var geocoder = new google.maps.Geocoder(); ...

Adding a prefix to the imported CSS file

My React app, created with create-react-app, is designed to be integrated as a "widget" within other websites rather than functioning as a standalone application. To achieve this, I provide website owners with minified JS and CSS files that they can inser ...

What is the method for toggling background URLs?

Currently, I am utilizing flaunt.js by Todd Moto for my navigation system. My goal is to seamlessly switch the hamburger image with another image when the mobile-menu is shown and hidden. Check out the demo here. For a detailed tutorial, visit this link. ...

Trouble with displaying an array of React elements in the render() function

While learning React by creating sample projects with Meteor, I've managed to grasp the basics but hit a wall. I'm utilizing a Twitter API to fetch the latest three tweets from the BOINGBOING Twitter page. The API is functional, and I can succes ...

The pie chart fails to fully display

Check out the repro example I made here. The legend is displaying properly, but the graph is not showing up. What could be causing this unexpected issue? ...

Can a string variable be passed as a file in a command line argument?

Running a command line child process to convert a local file to another format is something I need help with. Here's how it works: >myFileConversion localfile.txt convertedfile.bin This command will convert localfile.txt to the required format an ...

Send input data to a script seamlessly without triggering a page reload

I'm facing an issue with sending form values to a script. My goal is to have the form values displayed on another part of the page when the user clicks a button. While I can achieve this using PHP or similar web scripting languages by sending the valu ...

Creating image gallery with navigation arrows in JS/jQuery to loop through array of thumbnails

I am relatively new to working with arrays, and I have been exploring ways to use them in controlling the positions of thumbnails when navigating through a series of images using next or previous buttons. My goal is to make the thumbs loop seamlessly whene ...

Implementing 'Load more...' in Rails for infinite scrolling instead of traditional pagination

I currently have a collection of items and have been utilizing the will_paginate gem. However, I am interested in implementing a "load more..." feature at the end of the list. Is there a straightforward way to achieve this with will_paginate, or should I e ...

After attempting to publish my NPM package, I encountered an issue where I received an empty object. This occurred despite utilizing a setup that includes ES6, Babel,

Is there anyone out there who can assist me with this issue? I am attempting to publish an npm package with the following configuration: webpack: production: { entry: [ './src', './src/app.scss', 'draft- ...