Two input files are simultaneously being disabled

Hello, I have a scenario where I need to upload two input files and after uploading them, they should be disabled individually. However, my current code disables both file inputs at the same time when trying to upload the first file. How can I modify the code to disable them separately?

    angular
      .module('app', [])
      .controller('ctrl', function($scope) {
        $scope.disabled = true;
      });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <style>
      .ng-disabled {
        background: #E9B96E;
      }
    </style>

    <span ng-app="app" ng-controller="ctrl">
    <input type="file" ng-class="{'ng-disabled': disabled}" ng-disabled="disabled" id="input1" />
    <input type="file" ng-class="{'ng-disabled': disabled}" ng-disabled="disabled" id="input2"/>
    </span>

Answer №1

By utilizing the same $scope variable for both fields, you are inadvertently causing both inputs to behave in the same manner. To rectify this issue, consider using distinct $scope variables.

While I could present a ready-made solution for you, I believe that allowing you to explore potential fixes on your own, armed with the knowledge of the problem, may lead to a greater understanding and learning experience.

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

Expand or collapse in a sequential manner

Is there a way to ensure that only one table row expands at a time, causing the others to collapse? Any suggestions on achieving this? Here's the HTML code snippet: <table class="table"> <tbody> <tr class="parent" id="2479"> ...

Sending an object over to a different page

Need some assistance with displaying JSON data that is being repeated using ng-repeat. { "title": "image title", "description": "Lorem ipsum dolor sit amet, per ea ferri platonem voluptaria, ea eum ubique ornatus interpretaris. Dolore erroribus reprimique ...

After a slight delay, the animated element twitches into action

I am currently working on implementing a menu item behaviour in the header similar to the one found at: . On this webpage, there is a bar that slides back and forth when hovering over elements. However, I am unable to add another element to my header, so I ...

The sliding animation of jQuery beneath the menu button is causing the rest of the buttons to move unexpectedly

I have been working on a menu and have successfully implemented it in Chrome and Safari. You can view the menu at . However, I am facing issues with Firefox when it comes to the tooltip feature. Every time I hover over a button, the other buttons (which a ...

What is the best approach for processing and managing two JSON files?

I am interested in learning the best way to structure data using Angular with JSON API's for my project. The idea is to retrieve the First file through a GET request and store it in an array, then use one of the Key Values to trigger a request for a S ...

Angular - CSS Grid - Positioning columns based on their index values

My goal is to create a CSS grid with 4 columns and infinite rows. Specifically, I want the text-align property on the first column to be 'start', the middle two columns to be 'center', and the last column to be 'end'. The cont ...

Tips on positioning one image on top of another image without the images shifting when the screen size is adjusted

Struggling to position the lightbulbs above the floor plan? Even after setting the floor plan image's position property to 'relative', the lightbulb images refuse to cooperate. Here is a snippet of the HTML code: <div> <img src ...

Tabbed form design using Twitter Bootstrap

Currently, I am working on a website using the Bootstrap framework. My goal is to create a single page that features a pop-up form with two or three tabs. Specifically, I envision these tabs as "The Markup," "The CSS," and "The JavaScript." While I have ma ...

flot.js - vertically position ticks, with a centered cut-off effect

I am facing an issue with using flot.js for charts that have a timestamp on the x-axis. Due to having numerous ticks on these charts, I decided to rotate them vertically to prevent overlap. While this solution works well, the labels are centered on the tic ...

Imagine a webpage with a width of 1000 pixels. Can you determine the precise horizontal position (from the left) of the div element with the unique id of "inner_div"?

Hello everyone, I hope you're doing well. I recently took a test and unfortunately got this question wrong. Imagine a web page with a width of 1000px. What is the exact horizontal (from the left) position of the div element with id "inner_div"? < ...

Customizing Bootstrap to automatically display a modal without the need for a button click

According to the Bootstrap website, modals are typically triggered using buttons. As I am working with React, I would like to control when the modal is displayed using JavaScript. Is there a way to have the modal appear by default? Here is the code snip ...

Which data attribute is appropriate for returning application/pdf files?

I have a web API method that returns an array of bytes with a content-type of 'application/octet-stream' to generate a PDF file. My frontend framework is AngularJS. Question: In the code snippet provided, what data value should be used for the h ...

The fluid jumbotron in react-bootstrap is not extending to the entire width of the webpage

For the past few days, I've been engrossed in working on a website to sharpen my React skills using create-react-app, react-bootstrap, and styled-components. Initially, everything was smooth sailing with the jumbotron when it resided in my App.js file ...

Unable to retrieve information from the API server (with a public IP) using ngResource

This may seem like a naive question, but I am stuck and new to Angular. Despite searching extensively, I have not been able to find a solution. var app=angular.module('myApp',['ngResource']); app.controller('myCtrl',['$s ...

Troubleshoot: Border problem within nested columns in Bootstrap

https://i.sstatic.net/RDWfp.png My layout is based on the bootstrap 4 grid system, as shown in the image above. The problem I'm facing is that the border at the bottom row is misaligned. I have four nested columns in the first and second rows, but on ...

What are some strategies for disregarding global CSS styles?

I am facing an issue on my html page with a specific div structure. The <div id="container">/* lots of nested html with elements like div, ul, li etc */</div> is causing some trouble in my global css file called style.css. The style. ...

Can someone explain how to utilize the :valid and :invalid selectors in CSS?

Recently, I've started exploring coding and a friend mentioned that it's feasible to incorporate the :valid and :invalid selectors into my CSS for form. However, I'm unsure on how to implement this. Can anyone guide me on this? ...

What could be causing my right-floating elements to shift more towards the left with each occurrence?

After following a todo list tutorial, everything was running smoothly until I decided to add some styling to it. I placed a Font Awesome trash can icon inside a button with the class "remove." Essentially, I removed all the styles from the button, leaving ...

Strange Safari 15 bug causing unexpected transformations

Hey there, I'm a div with animation on scroll using GSAP. On Safari 15 (no issues below 15), something strange is happening - parts of the letters are leaving an afterimage on the sides. The code snippet I am using for this animation is: this.$refs.l ...

Ways to align text vertically across different browsers without dependence on one

Scenario: I am currently working on a personal project where I need to design playing cards for a game using CSS Main Objective: My goal is to align the text on the cards so that it appears centered and visually appealing Actions Taken: The relevant H ...