The ng-disabled feature restricts the input of multiple texts into a text box within an ng-repeat loop

Just wanted to share an issue I'm facing with ng-disable in a fiddle. I've been trying to disable all input text boxes that already have a value, but the problem is that when I try to enter a value into a textbox that doesn't have one, it gets disabled after just typing a single character. Has anyone else encountered this same issue before? Please share your thoughts.

Click here for more on disabling input text boxes inside ng-repeat

  <input type="text" ng-model="valuesForOutputs[item.name][i]" 
                                        ng-disabled="valuesForOutputs[item.name][i]" required   name="value"
                                               placeholder="Enter value">

Answer №1

The issue lies in your attempt to disable based on the initial state of the output values, which are then modified causing changes in what is disabled or enabled.

Instead of this approach, it would be better to create a duplicate copy of the values and use that duplicate to handle disabling. Afterwards, you can update the main values using $scope.valuesForOutputs to keep track of the current values.

You can try implementing the following code snippet:

var origValuesForOutputs = angular.copy($scope.valuesForOutputs);

$scope.isDisabled = function(output, month) {
   var val = origValuesForOutputs[output][month];
   return val && val.length;
 };

Make sure to change the ng-disabled attribute to:

ng-disabled="isDisabled(item.name, i)"

You can access the Plunker example here: http://plnkr.co/edit/2AeNujzK2XLtBzdHbLNS?p=preview

Answer №2

This hack can be implemented using ng-init:

<div ng-repeat="num in numbers"
    ng-init="isNegative=!numbersList[item.number][num]">{{numbersList[item.number][num]}}
    <input type="number" ng-model="numbersList[item.number][num]"
        ng-disabled="numbersList[item.number][num] && !isNegative"
        required name="value" placeholder="Enter value">
</div>

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

What is the best way to include id="" in a textarea generated using javascript?

Having an issue with my textarea var tex = document.createElement("TEXTAREA"); document.body.appendChild(tex); Does anyone know how I can add a class and id to the textarea or areas? ...

Leverage the model attribute in a Spring controller to conditionally display elements using

I am currently working with spring boot, angularjs and using html as the view. This setup is being implemented in index.html. <a ng-show="permission=='write'"> By returning the 'permission' value in the model from the spring boo ...

Can you explain the functionality of a Radius Manager and how I can personalize it to suit my needs

Can you explain what a Radius Manager is and how I can customize it? My company wants me to create a website based on their radius manager, and they've given me three steps for the login page: 1- Verify username and password for authentication 2- Ch ...

Buttons in Laravel are shifting unexpectedly

There are three buttons available with different functions. <div class="form-group row mb-0"> <div class="col-md-6 offset-md-4"> <button type="submit" class="btn btn-primary"> {{ __('update') ...

AngularJS: customizing table columns on the fly

I need to customize the display of certain columns in a table based on the JSON response I receive from the server. Here is an example of the HTML code: <div ng-controller='browserStatsController'> <select id="searchTypeDropdown" name= ...

Retrieve the title from within the app while using Ionic push notifications

I have been working on developing a mobile app using the ionic framework, and I have successfully integrated push notifications. The notifications are coming through perfectly on my device, and everything is functioning smoothly. Now, my next goal is to ac ...

Automatically populate dynamic fields with ajax response

Using auto-fill with an ajax request works well for static fields. For example: $this->registerJs("$(document).delegate('.form-control','change',function(event){ $.ajax({ url: '".yii\helpers\Url::toRoute( ...

Is there a way to confirm whether the current date and time, based on a specific timezone and hour, is before or equal to a particular date?

I am working on a project that involves a timezone map with publishing hour in the local zone and news articles that need to be scheduled using a date picker. This particular article is set up as follows: { timeZoneId: 'Europe/Paris, releaseHour: 9 ...

How to implement form modal binding using Laravel and Vue.js

There are two models named Tour.php public function Itinerary() { return $this->hasMany('App\Itinerary', 'tour_id'); } and Itinerary.php public function tour() { return $this->belongsTo('App\Tour', ...

Vue: need to import a package: unable to set a value to a constant property 'exports' of the object '#<Object>'

After installing the resource-bundle package in my project, I attempted to use it in my main.js file: /*main.js*/ var co=require('co'); var loader = require('resource-bundle'); co(function*(){ ... ... }).catch(onerror); Upon exa ...

Troubleshooting a connected A-frame problem involving dynamic room configurations and video streaming

I have been developing a project utilizing A-frame () along with the networked A-frame component (https://www.npmjs.com/package/networked-aframe) (project located at: ) I have encountered an issue with the video feed in my project. Currently, the video f ...

The process of integrating Tailwind elements into NextJs version 13

Can anyone help me integrate Tailwind elements into my NextJs project using JavaScript instead of TypeScript? I tried following the documentation, but the navbar component's expand button doesn't work. It seems like all components are having some ...

Preventing JavaScript injection in Rails 3.2 js.erb files

I'm completely new to the world of Rails and I find myself lost in confusion. One particular aspect that's causing me a headache is utilizing a js.erb file to display a list of products fetched from the server. What baffles me even more is how th ...

switching the content of an element using Javascript

I'd like to switch between two icons when clicking on .switch and apply the style of .nightTextNight to .nightText, my JavaScript code is working well everywhere except here. Is there a simpler way to achieve this? I currently have to create two clas ...

The video auto plays in a pop up window, but if the pop up doesn't appear, I can still hear the audio

I recently added a pop-up to my website and attempted to include autoplay functionality. However, I encountered an issue where the sound would still play even if the pop-up did not appear upon refreshing the page. How can I prevent the autoplay when the po ...

Troubleshooting Karate - jbang.execute() (Node npm)

Need help with a question that's part of our project presentation. We are working on controlling the output of KARATE, ensuring it returns an OK or a KO depending on the test result. Currently, it always gives back 0 regardless of success or failure. ...

Retrieving random HTML content with an AJAX request

Solving this technical issue has been quite a challenge for me. Running on Ubuntu 14.04 with Apache and PHP5, I initially suspected my NetBeans IDE to be the culprit, but then I directly ran it from the web root /var/www/html. PHP is functional as I'v ...

Is it necessary to reset (local storage, session storage) once the countdown timer reaches zero?

I have successfully implemented a countdown timer using session storage in my code. However, I am looking to enhance its functionality further by: Clearing the local session if the user leaves the site before the countdown timer finishes. Automatically c ...

Using jQuery to animate based on scrolling to a specific location

Currently, I am working on a smooth scroll effect where an element's top padding reduces gradually as the user scrolls. Simultaneously, I want two child elements to fade - one fading out and the other fading in. While I have achieved the fading effect ...

Encountering varying outcomes in Internet Explorer and Chrome when converting a UTC date and time to a local date and time by utilizing the getTime

My current approach involves converting UTC date time (received from the server in the format 2017-01-25T23:08:08.453) to local date time on the browser using JavaScript. I do this without asking the user for their timezone details, and assuming that the s ...