I am having trouble getting ng-change to work. Can someone explain how to properly implement ng

I am facing an issue where the ng-change function is not working for obtaining the team_id and team name. Can someone suggest a more efficient solution to resolve this problem?

<th style="width:20%">
<select 
  style="height: 40px;
         font-size: 12px;
         width: 100%;
         border-radius: 3px;
         border: 1px solid #dfe3e9;
         background: url(../image/select-icon.png) 100% no-repeat !important;
         padding-left: 8px;
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         padding-right: 23px;"
  ng-model="team_selected"
  name="team_selected"
  required=""
  ng-change="selected_team(team_selected)">
  <option value="" disabled="" selected="selected">Select Team</option>
  <option
    value="{{teams.team_id}}"
    ng-repeat="teams in teamavailable track by teams.team_id">
    {{teams.team_name}}
  </option>
</select>
</th>
javascriptangularjs

Answer №1

Make sure to implement ng-options as demonstrated in the code snippet below and then verify if your ng-change function is functioning correctly.

<select ng-model="team_selected" name="team_selected" required ng-change="selected_team(team_selected)" ng-options="team.team_id as team.team_name for team in teamavailable track by team.team_id" >
    <option value="" disabled="" selected="selected">Choose a Team </option>
</select>

Answer №2

Utilize the ng-options directive to implement your team object as options value, enabling you to pass the entire object or specific attributes to a function.

Take a look at this working example on Plunker.

<select ng-model="selected_team" 
        ng-change="selectTeam(selected_team.id, selected_team.name)"
        ng-options="team.name for team in teams">
  <option value="" disabled="" selected="selected">Select Team </option>
</select>

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

Issue with Accordion Panel Content Scroll Bar

Hello there, I've encountered a puzzling problem with my website. My objective is to insert a Time.ly Calendar widget into one panel of my accordion. On this page, "TOURNAMENTS: , the widget appears exactly as desired. However, when I replicate the c ...

javascripthtmlcssscrollaccordion

Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy

Hey there, I've got this piece of code written in Javascript for a classic ASP page. Since there are no CSS classes defined, everything is handled within the Javascript itself. var $a= $('#a'), $v= $('#v'), $s= $('#s'), ...

javascriptjquerycss

What is the functionality of the disabled attribute on an option tag within a dropdown select menu?

I am working with a code snippet that involves understanding how the attribute:disabled functions on an <option> within a <select> element! Let's say I have a dropdown for ratings and I select the 5-star option (★★★★★). Upon sel ...

javascripthtmlbootstrap-5

React Router - Changing the URL path without affecting the components displayed

Facing an issue with React Router where the main page renders but other pages do not. I am using a library called react-responsive-animate-navbar for the Navigation bar, which works well and changes the URL when clicked. However, the specified component fo ...

javascriptreactjsreact-router

How to Avoid Duplicating Documents in MongoDB?

I'm currently exploring effective methods to avoid saving duplicate documents in MongoDB. Currently, my form captures the user's URL input. The workflow is as follows: Validate if the user's URL is valid (using dns.lookup). If the use ...

javascriptnode.jsmongodb

Encountered a 404 error (not found) while making a GET request with axios

I encountered an issue with my pizza shop application built with Next.js. Whenever I run the app on my computer, I come across this error: https://i.sstatic.net/tsQzZ.png The error disappears after refreshing the page. Here is my index.js file: import ax ...

javascriptreactjsnext.jsaxiosvercel

What is the best way to avoid the @ symbol when retrieving JSON data in AngularJS?

I am currently attempting to retrieve data from a JSON file using Angular. The structure of the JSON is as follows: { "@rid":"#12:0", "@version":2, "@class":"Node", "name":"1", "childs":[ { "@rid":"#11:2", "@version" ...

jsonangularjs

Breaking down an array into groups - where did I go wrong in my code?

Check out the following code : function splitArrayIntoGroups(arr, size) { // Splitting the array into groups. var newArray = []; for(var i = 0; i < arr.length; i++){ for(var j = 0; j < size; j++){ newArray.push(arr.splice(0, size)); ...

javascriptarraysalgorithmloopslogic

While working on my Laravel and Vue.js project, I encountered the following error message: "Module not found: Error: Can't resolve './vue/app' in 'C:vue odolist esourcesjs'"

Running into an issue where the app.vue file cannot be found in the app.js. I'm using Laravel version "8.31.0" and VueJS version "^2.6.12". Any assistance would be highly appreciated. The content of app.js is: require('./bootstrap'); impor ...

javascriptlaravelvue.js

Alert received upon selecting the React icon button

In the login code below, I have utilized FaEye and FaEyeSlash react icons. However, every time I click on them, a warning message pops up. To avoid this issue, I attempted to switch from using tailwindcss to normal CSS. Login.jsx import { useContext, useS ...

javascriptreactjsreact-icons

What is the best way to make an image expand when clicked, align it in the center of the webpage, and have it return to its original position with just one more click by utilizing

Currently, this is the code I am working with. The JavaScript functionality is working well, however, there seems to be an issue where the image does not return to its original size on a second click. Additionally, I am having trouble getting the CSS to ce ...

javascripthtmlcssimage

Why isn't $location functioning properly in Angular?

Trying to utilize Angular location, but encountering issues: app.controller("maintenanceCtrl", function ($scope, $window, $sessionStorage, ArbreeService, $location) { angular.element(document).ready(function () { var absUrl = $location.se ...

angularjs

"Enhancing User Authentication with Firebase Email Verification in React Native

Does Firebase have a feature that allows me to verify if an email confirmation has already been sent to a user? I am able to check validation, but I need to determine whether the verification email has already been sent in order to decide if it needs to be ...

javascriptreactjsfirebasereact-native

Tips for implementing a tile vendor in AngularJs Leaflet?

I'm looking to remove the roads from an OSM map displayed using Leaflet in my AngularJs application. A recent forum post mentions that removing roads directly isn't feasible, but suggests using a layer provider with background images devoid of r ...

angularjsleaflet

Adjusting the height of a flexbox column to fit three rows within the space of two

Exploring the wonders of Flexbox and delving into its functionality. I have shared a Code Sandbox link showcasing my React /bootstrap code in progress... Currently, I am developing a clock component with two buttons for adjusting time (increase/decrease). ...

javascriptcssreactjstwitter-bootstrapflexbox

The process of registering with JWT tokens and the challenge that arises when a token expires

I had the idea to implement a registration process that requires users to provide their username, email (which must not already exist in the database), password, and confirm password. The project is built using NextJS with pages router and Typescript. impo ...

javascriptreactjsnext.jsreduxjwt

Having trouble navigating the maze of Express routing

app.js file // home route app.get("/home", async(req, res)=>{ let allCards = await Card.find({}); let skills = await Skill.find({}); res.render("index", {allCards, skills}); }) // add new skill route app.get("/home/newskill", (req, res)=& ...

javascriptmongodbexpressejs

Get the dynamically loaded value from angular.js by using Selenium with Python

I'm currently facing a challenge in extracting a value from an online form that is being dynamically loaded through angular.js. The specific value I need to retrieve is located within the following element: <input type="text" ng-d ...

pythonangularjsselenium

Sort through the data that is already populated and proceed to paginate within Mongodb

Hey there, I'm currently working on populating some data and then implementing pagination for that data. Take a look at this example: Schema A (Users) { name: 'Demo', postId: 'someObjectId', } Schema B (Posts) { id: 's ...

javascriptmongodbmongoose

Designating a certain function to a designated button

On my page, I have three different forms with submit buttons in each. There is a code that is supposed to change the value of a button in a specific form when clicked. However, whenever I click on any submit button, all the values in the buttons of the v ...

javascriptjqueryajax