The view in Angular JS is not displaying the latest updates as expected

I recently encountered a problem in AngularJS where the view is not updating correctly when the model value changes. It seems to be an intermittent issue where instead of displaying the new model value, it appends the old and new values together.

Upon investigation, I confirmed that the model does indeed contain the correct value.

Below is a snippet of the view code:

<div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <div class="container">
        <div ng-repeat="p in point" id="{{'point-' + p.Id}}" class="{{p.BackgroundClass}}">
            <div class="point-number">{{p.Id}}</div>
            <div class="{{p.ImageClass}}"></div>           
            <div class="point-amount">{{p.Amount}}</div>
            <div class="point-quantity">{{p.Quantity}}</div>            
        </div>
    </div>

Answer №1

class attribute should not be utilized in this manner. It is recommended to use the ng-class directive instead.

Here is a demonstration for clarification: https://jsfiddle.net/coldcue/o7q6gfs4/

JavaScript

angular.module('testApp', [])
  .controller("TestController", function($scope) {
    // Initialize the value
    $scope.state = "state-blue";

    // Change class on click
    $scope.click = function() {
      $scope.state = ($scope.state === "state-blue") ? "state-red" : "state-blue";
    }
  });

HTML

<div ng-controller="TestController">
  <div ng-class="state">
    Some label
  </div>
  <input type="button" ng-click="click()" value="Click me">
</div>

There are various methods to utilize ng-class, additional information can be found here: https://docs.angularjs.org/api/ng/directive/ngClass

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

Is there a way to tally the checked mat-radio-buttons in Angular?

I am seeking a way to determine the number of radio buttons checked in a form so I can save that number and transfer it to a progress bar. <mat-radio-group name="clientID" [(ngModel)]="model.clientID"> <mat-radio-button *ngFor="let n of CONST ...

What is the best way for AngularJS ng-repeat to access the key of an item?

For more information, check out the documentation: https://code.angularjs.org/1.2.26/docs/api/ng/directive/ngRepeat The ngRepeat directive creates a template for each item in a collection. Each template has its own scope with the current item assigned t ...

AngularJS: How can you make one element update another element's view if they share the same controller?

Here is the setup in my index.html: <div id="div1" ng-controller="StartMenu"> <div id="button1" ng-click="doSomething()"></div> {{value}} </div> <div id="div2" ng-view></div> Setting up the module: angular.module( ...

Following the parsing of the list of months, the sequence undergoes a

After receiving the JSON encoded object from the server side in PHP MONTHLY_FORMAT, I am reading that object in jQuery as: var MONTHLY_FORMAT = '<?php echo $MONTHLY_FORMAT; ?>'; When checking the console output, it looks like this: {"0 ...

Trouble encountered while attempting to choose a single checkbox from within a v-for loop in Vue.js?

<div id="example-1"> <ul> <input type="text" v-model="searchString" placeholder="Filter" /> <p>sortKey = {{sortKey}}</p> <li v-for="item in sortedItems"> <input class="checkbox-align" type="checkbo ...

A guide on embedding a jpg or png image into an HTML button

I need a button that includes an image. Here is the code I am using: <input type="submit" name="submit" src="images/stack.png" /> However, the image is not displaying on the button as intended. My goal is for the entire button to be the image. ...

Issue with Cordova contact plugin functionality

Upon calling the specified function, I encounter the following error message: "TypeError: Cannot read property 'pickContact' of undefined" $scope.pickContact = function() { navigator.contacts.pickContact(function(contact) { if(co ...

React / Next.js Rendering Problem, Data Discrepancy Between Client and Server

A new feature has been added to a webpage where an image background and a city name are displayed on top of it. The data file that generates these image backgrounds and city data consists of a standard array of objects. The challenge lies in dynamically l ...

Encountering an issue with the combination of SockJS and AngularJS: Error message

Currently experimenting with Angularjs and sockjs, utilizing this helpful resource: https://github.com/bendrucker/angular-sockjs On page load, I aim to transmit data via sockjs, however, encountering an Error: INVALID_STATE_ERR on the client side when att ...

passing a dynamic attribute to a custom validator

I'm currently working on developing a custom validator in the form of a directive for a component. I am facing an issue where I am unable to retrieve the actual value of the attribute, only getting the string of the method being called. An excerpt fr ...

Converting a JSON array to C# and vice versa in Xamarin Forms

I've been struggling to send a C# object as JSON array to an API endpoint. I feel like I'm going crazy trying to solve these issues. Here's a sample of the JSON data: Array ( [user_id] => 0002323445635 [order] => {"order":{" ...

Submitting an event on an Angular modal component

I recently created a modal component using the following template structure: <div class="header"></div> <div class="body"> <ng-content></ng-content> </div> <div class="footer" ...

How to Dynamically Set AngularJS Filter (like date or currency) Using Variables

When working with Angular, it's possible to easily apply filters to format variables, like so: {{ myDate | date }} {{ myMoney | currency }} But, is there a way to dynamically set the filter type in a more flexible manner as shown below? // controll ...

Create a graph that can retrieve and showcase information stored in a Rails database

Is there a way to incorporate a graph into a Ruby on Rails application that can access and show data from a database file (.rb)? If so, what would be the most optimal approach for achieving this? ...

How can we translate HTML entities generated by json_encode into matching XML conventions?

As I embark on the journey of creating a Samsung TV App, I find myself working within a strict system that only allows me to use JS and HTML5. One of the challenges I face is the need to send a JSON request to my web server to retrieve data for the emulato ...

Display Middleware Functions Attached in Console

I must say I was quite surprised by my inability to find any relevant information on this topic with a quick Google search. It seems like I may not have been digging deep enough. Essentially, I am seeking details about the middleware functions utilized in ...

Retrieving raw PCM data from webAudio / mozAudio APIs

I have been exploring ways to store the output from the webAudio API for future reference. It seems that capturing PCM data and saving it as a file might meet my needs. I am curious to know if the webAudio or mozAudio APIs have built-in functionality for ...

Chosen option - Selection Menu - Relational Database Language

I am currently working on a dropdown list that needs to be filled from a database: <TH> <FORM> <p>Department</p> <SELECT size="1" id="depart"> <OPTION> <?php ...

Setting up parameters and arguments in Vuex mutations: A guide

I am currently developing a todo list application using Vue.js, Vuex, and Firebase. The functionality of the app seems to be in working order with the Store file effectively managing the retrieval and display of entered todo items to and from Firestore. Ho ...

Tips for utilizing sorting, searching, and pagination features in Bootstrap 5 tables

In my simple table, https://i.sstatic.net/bu1md.png Furthermore, I have integrated Bootstrap 5: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a ...