How do I locate the specific page in angular.js where I need to make changes?

I have recently finished a project and now I am facing an issue that needs to be solved. In this project, there are 3 select boxes, each with different names. The first select box is named nameSelectBox162572640796915, the second one is named nameSelectBox16257264317217, and the third one is named nameSelectBox162572643286379.

Each select box has 3 value options: "1", "2", or "3". The challenge is that once a value is chosen in any of the select boxes, it should not be selectable in the other select boxes.

While analyzing the developer tools, I found a way to achieve this. For example, if a value is selected in the first SelectBox, I can write code for the second select box to disable that particular value.

var source = document.getElementsByName("nameSelectBox162572640796915")[0];
source.value;
document.getElementsByName("nameSelectBox16257264317217")[0].options[source.value].setAttribute("disabled","disabled");

The specific page where this issue occurs is http://localhost:3000/#/form. However, I am unable to locate the exact spot to implement this code effectively. Can anyone provide guidance on how I can address this issue?

javascriptangularjs

Answer №1

Here is a method you can use to achieve this. By setting the options to be generated through ng-repeat and then using ng-disabled to check which numbers have already been selected.

angular.module('myApp', [
  // Add any dependencies for myApp (controllers, etc.) here...
  'myApp.controllers'
]);

angular.module('myApp.controllers', []).
controller('MyCtrl', ['$scope', function($scope) {
  $scope.select1 = '';
  $scope.select2 = '';
  $scope.select3 = '';
  $scope.numbers = [1, 2, 3, 4, 5];

}])
<html ng-app="myApp" ng-controller="MyCtrl">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<select ng-model="select1">
  <option ng-repeat='num in numbers' ng-disabled="(select2 == num || select3 == num)">{{num}}</option>
</select>

<select ng-model="select2">
  <option ng-repeat='num in numbers' ng-disabled="(select1 == num || select3 == num)">{{num}}</option>
</select>

<select ng-model="select3">
  <option ng-repeat='num in numbers' ng-disabled="(select2 == num || select1 == num)">{{num}}</option>
</select>


</html>

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

Pass data from a JavaScript array to PHP with AJAX

I have sought assistance both here and on stackoverflow in creating an invitation function. Within an AJAX-based search box, users can invite teams. Upon locating and selecting a team, it is stored in an array. However, I now need to access the data from t ...

phpjavascriptajax

The connection to Cordova.js is established, but the deviceready event is not

I've included cordova.js in my project, called app.initialize();, but for some reason deviceready event is not being triggered. Any ideas on what might be causing this issue? Here's the JavaScript code: var app = { initialize: function() { ...

javascripthtmlcordova

I am experiencing issues with the ng-dropdown-multiselect library and it is not functioning

Check out this awesome library for creating dropdown menus using angularjs and twitter-bootstrap-3 at: . I am trying to implement the examples provided. In my html, I have: <div ng-dropdown-multiselect="" options="stringData" selected-model="stringMod ...

javascripthtmlangularjstwitter-bootstrap-3ng-dropdown-multiselect

Is it possible to modify a specific index within an array stored in Firestore?

How can I modify a specific index within an array stored in Firebase/firestore? export const editComment = (comment) => { return (dispatch, getState, { getFirebase, getFirestore }) => { const firestore = getFirestore(); firestore.collec ...

javascriptreactjsfirebasegoogle-cloud-firestore

The context parameter in Next Js' getStaticProps method gives back the values of "locales", "locale", and "defaultLocale" as undefined

Having an issue with the context parameter from Next Js's getStaticProps function. When I console log it, I am getting "{ locales: undefined, locale: undefined, defaultLocale: undefined }". Even though I am using getStaticProps inside the pages folde ...

javascriptreactjsnext.js

Tips for accessing the reference of a child when it is a functional component

Trying to implement a Higher Order Component (HOC) to access the ref of any component. It works perfectly fine when regular JSX is passed, but encounters issues when a functional component is passed: class GetRef extends React.Component { state = {}; ...

javascriptreactjsreact-hooksuse-ref

What is causing the "mb-3" class from Tailwindcss to malfunction with next/link?

The "mb-3" class from Tailwindcss in this Next.js component seems to have no effect in the Y direction. However, when using the "m-3" class, it also doesn't affect the Y direction, but instead has an impact on the X direction. impo ...

javascriptreactjsnext.jsjsxtailwind-css

Convert incorrectly formatted XML content into an HTML bulleted list

Currently, I am tackling a project that involves parsing an XML tree with less-than-ideal formatting. The task at hand is to create a UL structure from this XML data, but the challenge lies in all nodes having the same name with varying attributes. To achi ...

javascriptjqueryhtmlxmlajax

PHP not displaying Bootstrap input validation message set by JS

Currently, I am attempting to implement error messages using .setCustomValidity() and the .invalid-feedback class on an HTML form utilizing Bootstrap 4. Essentially, when the user validates the form, a JavaScript script assesses the inputs and if any erro ...

javascriptphphtmlbootstrap-4

Steps to show a Google Maps marker with the help of ajax

I'm trying to show a "marker" on the map using ajax, but I haven't been able to find a solution despite searching various sources online. ================= Here's the code I currently have: var map; function initialize(){ var center = ...

javascriptphpajaxgoogle-mapsgoogle-maps-api-3

Tips for transferring information between two distinct pages utilizing the jQuery POST technique

I'm dealing with two PHP files called card_process.php and payment.php. My goal is to transfer data from the cart_process page to the payment page. Here's a snippet of the code: In cart_process.php: $paynow = "<button type='submit' ...

javascriptphpjqueryhtmljson

Encountered a React 16 error: Unexpected TypeError stating that this.state.userInput.map is not a valid

I am working on a simple React app where a user can input text and I want to display each character as a list. Here is the progress I have made so far: App Components import React, { Component } from 'react'; import './App.css ...

javascriptreactjstypescriptreact-redux

Is there a way to execute a JavaScript file within another JavaScript file?

I'm in the process of developing a text-based game through the console, utilizing an NPM package known as "prompts" to prompt the user for input. One specific question it asks is, "What OS do you want to run?" and returns the selection as JSON data. F ...

javascriptpowershellnpmprompt

Using synthetic events in place of the values stored in useState

As I am relatively new to React, please bear with me as I attempt to explain the current issue. I am in the process of developing an application that retrieves all COD customer information and allows users to search through it. Additionally, it includes a ...

javascriptreactjs

Choosing a default selection in a nested v-for loop for a select box

Currently, I have a list of items that users can add new items to. Each item is required to have a select box, and the selected value from the select box should be assigned as the item's value. In an attempt to bind the select box to the item using t ...

javascriptselectvue.jsvuejs2

Can you explain the significance of foo === +bar?

Currently, I am diving into the world of express and came across a coding challenge that involves downloading a zip file and performing certain tasks. While going through the code, there is a specific line that is causing confusion: const recipe = recipes ...

javascriptexpress

Tips for manipulating and storing nested information within the "state" by utilizing "text input"

Using Material-ui Version: 0.1 The current value stored in state: formatter = [ {currencyField: "", amountField: ""} {accountField: "", amountField: ""} {numberField: ""} ] I am looking to update each element of the object in state ...

javascriptreactjsmaterial-uijsx

Using the same function name for JavaScript callbacks across multiple pages

In order to implement the Auto-Complete feature across multiple pages or views for the same input with the same class name (such as Client Name), I decided to write the necessary jQuery code in my project's shared layout file Views\Shared_Layout. ...

javascriptjqueryasp.net-mvc

Unable to retrieve the chosen value from a dropdown list using jQuery if the dropdown list was initially populated using jQuery

I'm currently working on implementing cascading dropdowns. I have a function that I created, and it's partially functional: function CascadeDropDowns(parentClass, childClass, action) { var DropDownId = $(parentClass + " option:selected").va ...

javascriptjquery

Utilizing JSON compression techniques on both the client and server ends for more efficient data transfer

I'm searching for a tool that can compress JSON on the server side (using C#) and then decompress it on the client side, as well as vice versa. The entire data model for my webpage is in JSON format and I need to find a way to reduce its size. I' ...

c#javascriptjson