Discover the process of obtaining multiple values when the drop-down menu values change in AngularJS

I have a small function in AngularJS that retrieves the meeting ID value from a drop-down menu when it is changed. The display value of the meeting name is used for this purpose.

The values in the drop-down menu are sourced from an array that is populated when the page loads.

Now, I need to retrieve two additional values from the same array to be used later in the code.

I attempted to add the variable assignment in a similar manner to how I did it for the meeting ID, but unfortunately, the values are not being assigned as expected.

Here is the snippet of code:

$scope.GetValue = function (meeting) {
    
    $scope.meetingId = $scope.selectedMeeting;
    
    $scope.meetingName = $.grep($scope.MeetingList, function (meeting) {

        // These are the 2 new variables
        meeting.MeetingDate == $scope.meetingDate;
        meeting.MeetingTitle == $scope.meetingTitle;

        return meeting.MeetingID == $scope.meetingId;
    })[0].MeetingName;

    console.log("Selected MeetingID: " + $scope.meetingId + "\nSelected Meeting Date - Title: " + $scope.meetingName + "\nSelected Meeting Title: " + $scope.meetingTitle + "\nSelected Meeting Date: " + $scope.meetingDate);
}; 
}; 

I've also included the HTML portion to demonstrate how the values are obtained and displayed in the drop-down:

                    <label for="meeting-list">Current Available Meetings</label>
                    <select ng-model="selectedMeeting" ng-change="GetValue()" ng-disabled="form.$invalid || !email" >
                        <option ng-repeat="meeting in MeetingList" value="{{meeting.MeetingID}}">Meeting: {{meeting.MeetingName}}</option>
                        <option value="">--Select Meeting--</option>
                    </select>

If anyone could provide assistance on correctly implementing this update, it would be greatly appreciated.

Thank you, Erasmo.

Answer №1

It appears that there may be an issue with how you are using $.grep in your code. The function does not alter the element parameter (in this case, meeting), but instead filters and returns the matched elements.

Another point to consider is ensuring accurate variable naming (JavaScript is case-sensitive !!) such as MeetingName, MeetingTitle, MeetingDate, and MeetingID. In your context, they all begin with lowercase letters.

You might want to explore using JavaScript's filter() method on your array to select a meeting.

angular.module('myApp', [])
 .controller('ExampleController', ['$scope', function($scope)  {    
    $scope.meetings = [
    { id: 1, title: 'First', date: '2020-09-01' }, 
    { id: 2, title: 'Second', date: '2020-09-02' }, 
    { id: 3, title: 'Third', date: '2020-09-03' }
    ];
    
    $scope.meetingIdSelected = $scope.meetings[0].id;

    $scope.pickMeeting = function() {
      console.log("selected",$scope.meetingIdSelected);
      $scope.selectedMeeting = $scope.meetings.filter(function (m) {
        return m.id === $scope.meetingIdSelected;
      })[0];
      console.log("found",$scope.selectedMeeting);
        };    
}]);
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app="myApp">

<div ng-controller="ExampleController">
  <select ng-model='meetingIdSelected' ng-change="pickMeeting()" required ng-options='m.id as m.title for m in meetings'></select>
  <hr>
  selected:
  <tt>{{selectedMeeting}}</tt><br />
</div>

</body>

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

Authentication using tokens - JSON Web Tokens

While working with jsonwebtoken in Node, we generate a unique token for each user and return it to them. But when the user sends this token in the authentication header (Authentication: <token>), how does jwt differentiate between tokens from diffe ...

Identifying the Version of JQuery on a Website

Greetings! I recently stumbled upon this website: My curiosity lies in whether it utilizes fullpage JavaScript for the images. I am aware that three JavaScript codes are responsible for the cursor effects, but I am uncertain about how background images ar ...

Tips for targeting the second field upon clicking the next button in React Native

I need help implementing a feature where, when a user clicks on the "Next" button, the focus shifts to the next field without using the ref method. Can someone assist me in achieving this goal without using ref? Thank you. ...

Can images be placed on the border?

Hi there! I am trying to add an image on a border with a 100px solid width using CSS. I have experimented with positions and z-index, but I can't seem to get the desired effect. Any ideas on how to achieve this? Here is an example image: https://i.sst ...

Ensuring the capture of all errors within asynchronous express route handlers using async-await syntax

Imagine having a route set up like this: app.get('/malfunction', (req, res) => { throw new Error('Malfunctioning!'); }); In this case, no response will be sent to clients. However, you can include a middleware for handling all ...

Troubleshooting: Issue with Vue.js scroll to element functionality

While using v-for in my code, I encountered an issue where I am trying to scroll to a newly added comment but keep receiving this error message in the console: Cannot read property 'top' of undefined The error seems to be originating from this ...

Transforming the Unix timestamp prior to transmission via JSON

Thank you for taking the time to address this situation. In my database, dates are stored as Unix timestamps. When I retrieve all the information using: while($row = mysql_fetch_assoc($result)) { $posts[] = $row; } /* ...

Steps for Implementing an Event Listener in JavaScript

While working on a page in Chrome, I encountered an issue where I wanted a modal to show up when a user clicked on an image. However, the functionality was not working as expected on my localhost. Upon further inspection, I believe there might be a problem ...

Utilizing AngularJS within the WebStorm IDE

I've been working on developing an application using d3js in WebStorm because I heard that it's the most efficient way to structure AngularJS projects. However, I encountered an issue when starting a new project and choosing AngularJS - there sh ...

AngularJS: The templateUrl is being rendered before the controller is able to execute any further actions

My current code is causing some trouble: angular.module("cattle_feed_frontend", ['ngResource','ngRoute']) .config(['$routeProvider', function($routeProvider){ $routeProvider. when('/', ...

Can anyone help me understand how to interact with Iframe #document using JavaScript?

After noticing that the frame I have contains a #document, I wrote some code in an attempt to access it. However, all my attempts to access the frame resulted in either restricted access or returned undefined values. $body = document.body; $body.chi ...

My website doesn't seem to support Javascript, although it works perfectly on jsfiddle

I was tinkering around on jsfiddle and managed to get my code working flawlessly. However, when I tried to copy and paste it elsewhere, the functionality broke down. It seems that for some inexplicable reason, the code doesn't seem to pass through the ...

Utilize the MaterialUI DataGrid to showcase nested object values in a visually appealing

Hey there, fellow coders! I'm currently working on fetching data from an API and displaying it in a data grid using React.js. Here's the format of the data I'm receiving from the API: {data: Array(200)} data : (200) [{…}, {…}, {…}, { ...

Angular2 waits for the JSON file to be fully loaded before proceeding

At the moment, I am loading a JSON file in the following way: translation.service.ts @Injectable() export class TranslationService { private _messages = []; constructor(private _http: Http) { var observable = this._http.get("/app/i18n/l ...

The results returned by AngularJS $q.all() come back as empty

Currently, I am working on implementing a $q.all function to execute multiple functions and then collect all the outputs in a function connected to the .then method at the end. Even though it seems like the promises are being called in the correct sequenc ...

React: Avoid the visible display of conditional rendering component fluctuations

In my current React project, I am developing a page that dynamically displays content based on the user's login status. The state variable "loggedIn" is initially set to null, and within the return statement, there is a ternary operator that determine ...

The issue with Node module @kenjiuno/msgreader is that it is unable to find the constructor for MsgReader

I've been having trouble getting the example code for parsing Outlook .msg files using @kenjiuno/msgreader to work. Despite successfully installing the module with npm, my code doesn't seem to function as expected: const fs = require('fs&apo ...

Explaining how types interact with arrays

I am looking to create a custom data type in TypeScript that can store an array of functions, where each function takes the output of the previous one as input. For example, a valid instance of this type would look like: const pipe: SpecialArray = [ () ...

An error occurred in the main thread while using Selenium with Java and JavaScript: "Exception in thread "main" org.openqa.selenium.JavascriptException: missing ) after argument list"

While testing in Chrome's developer tools console, I successfully executed the following codes. However, when attempting to run them in Selenium, an error stating "missing ) after argument list" was encountered. This issue suggests incorrect syntax, b ...

Enable table cell click functionality using jQuery

I am currently working on a quiz webpage that has a table of questions. Each row contains two possible answers, each with its own radio button for selection. My issue is that I want to make the entire cell clickable instead of just the radio button. Below ...