Prevent the ng-model from updating a disabled input field within an ng-repeat loop

In my table, I have 5 days of the week displayed using an ng-repeat for each day. Additionally, there is a button on the page that fills all inputs with data retrieved from the backend.

Here is a snippet of my code:

<thead>
  <tr>
   <th>Days</th>
  </tr>
</thead>
<tbody>
 <tr>
<td ng-repeat="day in days">
  <input type="text" ng-model="day.start" ng-disabled="item.date > currentDate"
</td>
  </tr>
</tbody>

There's also a button with an ng-click="someFunction()" which triggers a REST API method GET to populate the ng-repeat element with data retrieved from the backend.

The issue arises when certain days are disabled due to it being the current week. For example, if it's Wednesday and Thursday and Friday are disabled, clicking the button populates all 5 inputs instead of just Monday, Tuesday, and Wednesday like intended.

I would appreciate any suggestions or solutions you may have!

Answer №1

To determine if the day is available, utilize ng-if and verify its availability.

<input type="text" ng-model="day.start" ng-if="item.date > currentDate"

The DOM element will only be displayed on the page if the condition holds true.

Answer №2

One way to handle disabled inputs in AngularJS is by utilizing ng-model-options to provide custom getters and setters, including a noop setter for those inputs that should be disabled.

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

Special VueJs rendering for JSON data retrieval from API

Here is the data I received from an API: { "data": { "City": { "zip": "75000", "appointment": { "2020-10-12": { "08:00:00": 3, "09:15:0 ...

Problem with ngStyle: Error indicating that the expected '}' is missing

I encountered an error in the Chrome console when trying to interpret the code below: <div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat&ap ...

Is there a way to remove createdAt and updatedAt from every query in Sequelize?

Currently, I am utilizing Node 14 and Sequelize to model an existing Postgres database. The tables that have already been created do not contain the createdAt or updatedAt columns, so my intention is to set up Sequelize in a way that it will never attempt ...

Troubleshooting: ReactJS CSS Class Issue

I'm fairly new to working with ReactJS and I've encountered an issue while trying to create a class for a specific form. Below is the code I've written: import React, { Component, PropTypes } from 'react'; import s from './s ...

What is the process for setting default parameters using a recompose, lifecycle HOC?

I've created a custom recompose, lifecycle HOC: import { lifecycle } from 'recompose'; export function myHoc(title) { return lifecycle({ componentDidMount() { console.log(title) } }); } export default my ...

Updates made in the angular controller are not reflecting on the HTML page

I am facing an issue with displaying a "no internet access" button in my app when the user is offline and the required object is not available in the cache. Here is the HTML code: <div class="VideoPlayerController video-player-controller"> <span ...

Using Angular 2 to dynamically bind attribute names

I am facing an issue with a code block in Angular 2. Here is the code: <div *ngFor="let elm of elms; let i = index" [attr.name]="name" text-center> {{elm }} </div> Everything works well. However, I encountered a problem when trying to ...

Stellar.js is malfunctioning

I've been attempting to implement a parallax effect using Stellar.js with two image tag elements, but I'm encountering issues. Despite trying various configurations, including following the Stellar.js creator's tutorial scripts closely, noth ...

Enhancing Browser Experience: The correct method for dynamically adding an AngularJS controller through a Chrome Extension's Content

Currently, I am in the process of developing a Chrome extension using AngularJS. To attach a controller to the required DOM elements on a webpage, I have been utilizing the following content script code: setController() { if(this.setContollerConditio ...

What is the method for aligning elements in a single row?

I have integrated bootstrap into my project. The width of the section is set to 350px. Below are the HTML elements I am working with: <form class="form-inline"> <div class="input-group input-group-sm col-xs-5" > <input type="t ...

Click to remove the ellipsis from the backbone

Some Background Info I am working on creating a feed similar to Twitter where each row expands on click to show more information. The data is fetched from a JSON file sent from the backend to the frontend, and I am using Backbone.js for rendering. My fee ...

Ensuring data integrity and security through Firebase rules and validation for unique records

I'm currently in the process of developing a cutting-edge AngularJS application where users, after authenticating with Firebase anonymous, can input their Fullname, Company, and Email address to be added to our mailing list. The main objective is to ...

When Custom Route Provider is not a valid function

This question has been revised since this morning. I am working with two distinct modules, 'admin' and 'authorization'. Within the provider block of the authorization module, I utilize $routeProvider to add an identical route to all ro ...

In Vue3, have you ever wondered why the $emit function seems to work fine before a promise fetch,

https://i.sstatic.net/yJmDY.jpg I have encountered an issue while attempting to pass the result of a promise fetch from a child component to a parent component using emit. Strangely, the emit function was working perfectly fine before the $fetch operation, ...

How to extract specific dates from a date range in Javascript

If I give you a date range such as October 5, 2016 to December 5, 2016, and tell you that October 5 was a Wednesday, can you help me find all the Wednesdays until December 5th, 2016? Is there a way to accomplish this using Javascript or AngularJS? ...

What is the most reliable method for converting a 32-bit unsigned integer to a big endian byte array?

Looking for a simple and reliable method to convert an unsigned integer into a four-byte-array in big endian format, with padding if necessary? Take a look at this example: Input value: 714 Output: Resulting byte array [ 0xca, 0x02, 0x00, 0x00 ]; By the ...

Guide on keeping your MongoDB collection up-to-date with Mongoose

I'm currently facing an issue while working on a project. My goal is to build a MongoDB database where I can store dates and YouTube video links. I've chosen to use Mongoose as my ORM. The problem I'm encountering is that while I can create ...

What is the method for creating an array from an object?

I am facing a challenge with an object that has keys containing an index after the underscore. I need to gather each pair of keys with the same index together in order to achieve my expected object. Can someone help me figure out how to accomplish this u ...

What is the best way to attach to the beforeSubmit event of a dynamically loaded AJAX form in Yii?

Recently, I encountered an issue with dynamically loading a form via AJAX and attempting to bind the beforeSubmit event. Strangely, the event didn't seem to work as expected, causing the form to submit and the browser to navigate to a new page. This b ...

Tips on transforming a variable name into an index string within a jQuery object

When creating a loop based on the content in the form using an input form, the attribute name is taken as a selector element and object index array of data, with the index being the variable name How can I convert from a variable name to a string index ...