When the input field is empty and has not been selected, perform the action using AngularJS

I have a set of disabled input fields with one enabled input field at the top. Check out the Plunker here

Here's a quick summary:

When you focus on the "Name this group" input field, the first disabled input field will become enabled with an active class.

What I'm trying to achieve is that if there is no value in the "Name this group" field and it loses focus, it should revert back to its original state. This means the first child input will go back to being disabled and the active class will be removed again.

Any assistance in making this happen would be greatly appreciated.

Below is a snippet of my code:

$scope.focusGroup = function(i) {

    $scope.csTagGrp[i].csTags[0].active = true;

  };

  $scope.focusItem = function(i, parent_i) {
    $scope.csTagGrp[parent_i].csTags[i].old = true;
    if ($scope.csTagGrp[parent_i].csTags[i + 1]) {
      $scope.csTagGrp[parent_i].csTags[i + 1].active = true;
    } else if ($scope.csTagGrp[parent_i + 1]) {
      $scope.csTagGrp[parent_i + 1].csTags[0].active = true;
    }
  };

Answer №1

If you want to dynamically change the styling and enable/disable a field based on another field's value, you can utilize Angular expressions in your code.

<input type="text"
       ng-model="fieldZero"/>
<input type="text"
       ng-model="fieldOne"
       ng-class="{active: fieldZero.length > 0}"
       ng-disabled="!(fieldZero.length > 0)"/>

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

JavaScript: Scroll Through Images Horizontally with Descriptions for Each Image

I am looking to create a horizontal scroller/slider that will display images with captions underneath each image. The data is provided in an array of objects, so I need to iterate through the data and populate each item in the scroller with the necessary i ...

Choose a particular element within an element class using a variable as the selector in jQuery

Is there a way to dynamically add a class to a specific element in an array based on a variable in a for loop, rather than random selection? I need to target elements with the variable provided and possibly apply the class to more than one element if neces ...

Maintaining sequential order IDs for table rows even after removing records

I currently have a table structured as follows: <table> <tr> <td> <input type="hidden" name="help[0].id" /> </td> <td> <span class="tr-close">X</span> </tr> <tr ...

Automatically filling text fields in JSP using data population algorithms

Currently working on a project using jsp. The page features two text boxes. When the first text box is selected, a list of countries is retrieved from a MySQL database using jQuery. The task at hand now is: Without utilizing any events (especially button ...

Django view is not able to receive data posted by Angular resource

I have successfully implemented an angular resource with the following code snippet: var services = angular.module('Services', ['ngResource']). // SEND_REPLY_SMS factory('SendSMS', ['$resource', function($resource){ ...

Tips for creating a custom script in my React Native application

My React Native app requires a script to generate static files during the release process. The app is a game that utilizes pre-computed boards, which are resource-intensive to compute. Therefore, I am developing a script that will create these boards and s ...

Error: EPERM -4048 - the system is unable to perform the operation specified

Every time I attempt to install a package using npm install, I encounter an error message (usually referring to a different path). I have attempted running npm cache clean, restarting my computer, and checking for any processes that may be interfering with ...

Error: JQuery Ajax Success Handler cannot locate class method

There is a javascript Class in my code that successfully posts data, but encounters an issue when trying to access a specific function within a success handler. Although the function is found during the construction of the class and can be called from othe ...

The jQuery file that is included in the main master page is not accessible for the .aspx page that inherits the same master page

In my web development project, I am facing an issue with including the jQuery file in a master page. The structure of my project is as follows: The master page is located in the root directory. The jQuery file is stored in a folder named "script". The sp ...

Warning thrown when Ajax call is executed within a function, causing it to break

I'm in the process of refactoring a JavaScript file that performs multiple ajax calls. I have a function that makes an ajax call, retrieves an object with details required for other ajax calls. const makeCall = (url, type, data, done) => { $.aj ...

Displaying and concealing animation subcategories

I wanted to add animation to the sub-categories in my code snippet located at: this link so that they show up when I hover over the category name. Unfortunately, my current solution didn't produce the desired result. <script> $(document).ready ...

What is the correct method to conceal the error message using JavaScript with document.getElementById("failedUpdateMessage").style.visibility = "hidden"

Once I had applied the code to conceal the element identified by the id "failedUpdateMessage", I now want to reveal that hidden element on a certain webpage using html. How can I achieve this using java script? I attempted to change "hidden" to "show" bu ...

Having trouble parsing asynchronous script with cheerio parser

Utilizing cheerio for web crawling poses a challenge when encountering websites with asynchronous scripts. When attempting to extract all the scripts from such websites, they are often missed in the process. Here is an example of the code I am currently us ...

Access scope information when clicking with ng-click

I am currently using a php api to update my database, but I want the ability to choose which item gets updated with ng-click. app.controller('ReviewProductsController', function ($scope, $http) { $scope.hide_product = function () { ...

What is the best way to respond to a hashchange event within AngularJs?

I am new to AngularJs and I am trying to update the page on hashchange events. Currently, I have this code which I know is not the proper way to do it: <!DOCTYPE html> <html> <head> <style> #hashdrop { display:block; ...

CSS button pressed

I came across a helpful discussion on the topic of CSS for pressed buttons, which provided some answers that I found useful. The link to the discussion can be found here: Pressed <button> CSS. Currently, I have a button within a link and I would lik ...

"Learn how to add up elements in an array based on their unique IDs and generate a new array using

There is an array called data that looks like this: const data = [ {"id": "One", "number": 100}, {"id": "One", "number": 150}, {"id": "One", "number": 200}, ...

What are the steps to accessing the scene, renderer, and camera objects in Forge Viewer v6 using TypeScript?

In the past, I could utilize code such as this: var container = viewer.canvas.parentElement; var renderer = viewer.impl.renderer(); var scene = viewer.impl.scene; To access Three.js objects in Forge Viewer. With version 6, how can I achieve the same usin ...

When bootstrap labels are created dynamically, the spaces between them are stripped away

Every time I click the create button, a new bootstrap label is generated. However, the labels created appear bunched up with no spacing between them, as shown in the image below. https://i.sstatic.net/t5H1H.png How can I make sure that there is proper s ...

Resource file for locating the mappings

As a beginner in sourcemapping, I have been tasked with saving the sourcemap in an external file. However, up to this point, I have only been able to concatenate the sourcemap to the minified .js file. What changes should I make to my approach? Am I miss ...