Using AngularJS to refresh information stored in an array

My objective is to create a basic application that allows users to adjust their availability on weekdays. The code is functioning correctly as it retrieves data from the select box. However, I encounter an issue when trying to update Monday's data and find that Tuesday's data is also being updated with the same values.

Here is my JSON database:

"doctorSchedule" : [ 
        {
            "_id" : null,
            "working_day" : "Monday",
            "working_from" : [ 
                {
                    "_id" : null,
                    "hours" : "9",
                    "minutes" : "30"
                }
            ],
            "working_to" : [ 
                {
                    "_id" : null,
                    "hours" : "6",
                    "minutes" : "30"
                }
            ]
        }, 
        {
            "_id" : null,
            "working_day" : "Tue",
            "working_from" : [ 
                {
                    "_id" : null,
                    "hours" : "9",
                    "minutes" : "30"
                }
            ],
            "working_to" : [ 
                {
                    "_id" : null,
                    "hours" : "6",
                    "minutes" : "30"
                }
            ]
        }
    ],

Below is my Angular code:

$scope.data1 = $stateParams.viewUser;
$http({ 
    url: "/getinfo",
    method: "POST",
    headers :{'Content-Type': 'application/json','Accept': 'application/json'},
    data: dataParam    
}).success(function(response) { 
    if(response.status_code == "worked") {
      $scope.viewUser = response.clinicUserVo;
      $scope.datasc = response.doctorSchedule;                              
    } 
});

My HTML file includes the following components:

<table class="table table-bordered" ng-repeat="docSchedule in data1.doctorSchedule">
<tr>  <th scope="col"><input type="checkbox"  ng-model="data1.working_day"></th>
                                            <td>{{docSchedule.working_day}}</td>
                                            <td>

...
(more HTML code here)
...

                                        </tr>

                                 <tr>

</tr>
<tr >


</table>

I am experiencing issues where updates made to Monday also affect Tuesday's data in the HTML view. How can this be resolved using Angular?

https://i.stack.imgur.com/PIvLg.png

Answer №1

Adjust

<select  id="user_time_zone"   class="form-control form-group" ng-model="data1.working_from">

to

<select  id="user_time_zone"   class="form-control form-group" ng-model="docSchedule.working_from">

This modification ensures that each select within every ng-repeat will reference the correct docSchedule data.

Got it? In simpler terms, your current code is not functioning as intended because data1.working_from is pointing to the same model across all scopes and ng-repeat's.

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

Moving information from Ajax to PHP

I'm experiencing an issue with sending data from AJAX to PHP on the same site, "testpage.php". The PHP script doesn't seem to be displaying the data being sent. Using jQuery/Ajax: <script src="http://code.jquery.com/jquery-latest.js" type="t ...

What could be the reason behind the validation failure of this Javascript code?

After implementing your recommendation, this is my current status: <script> function tick() { const React.element = ( '<div><marquee behavior="scroll" bgcolor="lightyellow" loop="-1" width="100%"> <i> <font color ...

Encountered an unexpected JSON decode error: Could not find the expected value at the beginning of line 1, column 1

I'm working on a Django website and trying to resolve an issue with my code: views.py: for loop in range(0, len(userdata)): json_hall = requests.get( "https://www.onebookingsystem.com/API/Admin/booking_list_id.php?id=%s" % userda ...

Validating date inputs with ng-change in AngularJS

I am currently utilizing AngularJS along with AngularJS bootstrap within my webpage. One of the components I have is a date picker directive that is structured like this: <div class="form-group {{dateStatus.class}}"> <p class="input-g ...

Toggle visibility between 2 distinct Angular components

In my application, I have a Parent component that contains two different child components: inquiryForm and inquiryResponse. In certain situations, I need to toggle the visibility of these components based on specific conditions: If a user clicks the subm ...

Achieving nested views functionality with various modules in AngularJS and ui-router

I am currently working on a complex AngularJS application with a large module that I am looking to break down into smaller, more manageable modules. Our main page consists of several ui-views for menu, footer, content, sidebar, etc. Each $stateProvider.st ...

"Exploring the depths of sub directories in Node.js: A guide to printing

Once again, I find myself stuck with node.js and in need of your assistance. I am attempting to write a script for the command line interface that will search for all subdirectories under the current directory (process.cwd), and only print out those that ...

Ajax is malfunctioning and failing to fulfill my needs

I cannot get Ajax to submit no matter what. I've been struggling for hours... script: <script> $(document).ready( $("#submit").click(function(e) { e.preventDefault(); $.ajax({ url: "https://maps.googleapis.com/maps/ ...

Tips for choosing an option in a form using Selenium with JavaScript

I am currently in the process of automating some tests for a specific form, and I have successfully automated all steps except for selecting an option from a dropdown menu using JavaScript. Here is my code: const {Builder, By, Key} = require("sel ...

The perplexing behavior of RxJS Observables with Mongo Cursors

Recently, I've been working on converting a mongo cursor into an observable using my own RxJS implementation. Despite finding numerous solutions online, I wanted to challenge myself by creating one from scratch. I would greatly appreciate it if someo ...

If the input is marked as checked, apply a class to the corresponding HTML element

I need to manipulate the .form-group class by adding it if the nearest hotelObj element is checked, and removing it when hotelObj is unchecked. Instead of using addClass(), I prefer to utilize css(). $(".form-group").click(function() { if ($(this).ch ...

"Using Node.js for proxying requests and implementing OAuth authentication

Having a small node.js application that relies heavily on oAuth, I encountered an issue: the server where I intend to install it is concealed behind a proxy. This necessitates rewriting a portion of the code to incorporate proxy usage. Here's my query ...

Change the content of a selectbox dynamically with the help of jQuery and AJAX

Currently, I am exploring the best approach for a specific challenge: I have various categories, subcategories, sub-subcategories, and so on, that I need to display in separate select boxes. For instance, initially, the options may look like this: <sel ...

unable to execute grunt post npm installation

I'm having trouble getting grunt to work on my system. I tried installing it using npm install grunt -g It appears to have installed successfully - <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b3a6a1baa094e4fa0bbe7 ...

Make ui-router reload when the querystring is modified

In my current state configuration, it is defined as follows: $stateProvider.state("app.search", { url: "/search?q", templateUrl: "App/Search.html", controller: "SearchController as vm", }); When I need to navigate to the search page with a sp ...

Tips for keeping components mounted despite changes in the path

How can I maintain state in React routes to prevent unmounting when switching between them? In my application, it's crucial to keep the state intact during route changes. When changing routes, the respective components mount and unmount. How can this ...

api for enhancing images in Laravel app through preview, enlarge, and zoom functionalities

As I work on my website, I aim to display images in a compact space, such as within a 300x300 <div>. What I envision is the ability for users to preview or enlarge these images upon clicking, allowing for a closer and more detailed view. For exampl ...

Bar graph constructed using a pair of div elements

I extracted two values from an array: $target = $data->data[2][32][3]; For this particular example, $target = 9.83%. $clicks = $data->data[1][32][3]; And in this case, $clicks = 7.15%. I have created a bar-like chart using three main div elements ...

Is there a method for redirecting my page to a specific href link without triggering a page reload?

This is my HTML code. <a href="http://127.1.1.0:8001/gembead/emstones.html?car=36">Car</a> I am trying to redirect to a specific page with parameters without fully reloading the current page. Is there a way to achieve this task? I believe the ...

Issue: Upon attempting to connect to a vsftpd server deployed on AWS using the npm module ssh2-sftp-client, all designated authentication methods have failed

Code snippet for connecting to the vsftpd server sftp.connect({ host: "3.6.75.65" port: "22" username: "ashish-ftp" password: "*******" }) .then(() => { console.log("result") }) .catch((err)=>{ ...