Having trouble retrieving data on the controller page with angular.js

I am encountering an issue with my Angular.js controller file where I am unable to retrieve any value from the drop-down list. The error message being displayed is:

$scope.subname is undefined

Below is a breakdown of my code.

index.html

<table class="table table-bordered table-striped table-hover" id="dataTable" ng-app="myApp" ng-controller="tableCtrl">
    <tr>
        <td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i>
            <BR>Day <i class="fa fa-long-arrow-down"></i>
        </td>
        <td width="100" align="center" ng-repeat="hour in hours" ng-bind="hour"></td>
    </tr>
    <tbody id="detailsstockid">
        <tr ng-repeat="days in noOfDays">
            <td width="100" align="center" style=" vertical-align:middle" ng-bind="days"></td>
            <td width="100" align="center" style="padding:0px;" ng-repeat="hour in hours" >
                <table style="margin:0px; padding:0px; width:100%">
                    <tr>
                        <td>
                            <select id="coy" name="coy" class="form-control" ng-model="subname">
                                <option value="">Select Course</option>
                                <option value="A">Theory1</option>
                                <option value="B">Theory2</option>
                                <option value="C">Theory3</option>
                                <option value="D">Theory4</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select id="coy" name="coy" class="form-control" ng-model="facname" ng-change="readData();">
                                <option value="">Select Faculty</option>
                                <option value="A">Faculty1</option>
                                <option value="B">Faculty2</option>
                                <option value="C">Faculty3</option>
                                <option value="D">Faculty4</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

script.js

var myApp = angular.module('myApp', []);


myApp.controller('tableCtrl', ['$scope',
      function($scope) {

        $scope.noOfDays = [];

        $scope.days = {
          '0': "Monday",
          '1': 'Tuesday',
          '2': 'Wednesday',
          '3': 'Thursday',
          '4': 'Friday'
        }

        $scope.hours = [
          '9AM :: 10AM',
          '10AM :: 11AM',
          '11:15AM :: 12:15PM',
          '12:15PM :: 01:15PM',
          '02PM :: 03PM',
          '03PM :: 04PM',
          '04PM :: 05PM'
        ]

        for (var i = 0; i < 5; i++) {
          $scope.noOfDays.push($scope.days[i]);
        }
         $scope.readData=function(){
         alert($scope.subname.value,$scope.facname.value);
         }
      }]);

Upon triggering the ng-change event, the aforementioned error occurs. The objective is to store the selected course data and faculty name in a JSON variable based on day and time. Feel free to explore this plunker example and assist me in resolving this issue.

javascriptangularjs

Answer №1

You have utilized ng-model="facname" and ng-model="subname", but for retrieving the values, you have used

alert($scope.subname.value,$scope.facname.value);

This approach will not work because $scope.subname needs to be defined in the controller. However, you can pass it as a parameter to a method and retrieve it in the controller function like this:

$scope.readData = function(subname, facname, days, hour) {
      alert('name : ' + subname + ', facname : ' + facname + ', days : ' + days + ', hours : ' + hour);
}

And in the HTML markup:

<select id="coy" name="coy" class="form-control" ng-model="facname" ng-change="readData(subname, facname, days, hour);">

Ensure that the ng-change function passes four arguments. You can directly pass the model value to the function and access that value in the controller function.

Note: If the first dropdown is not selected or set to the default value, changing the second dropdown will return undefined for subname.

Refer to the following snippet for more details:

var myApp = angular.module('myApp', []);


myApp.controller('tableCtrl', ['$scope',
  function($scope) {

    $scope.noOfDays = [];
    //$scope.subname = '';
    //$scope.facname = '';

    $scope.days = {
      '0': "Monday",
      '1': 'Tuesday',
      '2': 'Wednesday',
      '3': 'Thursday',
      '4': 'Friday'
    }

    $scope.hours = [
      '9AM :: 10AM',
      '10AM :: 11AM',
      '11:15AM :: 12:15PM',
      '12:15PM :: 01:15PM',
      '02PM :: 03PM',
      '03PM :: 04PM',
      '04PM :: 05PM'
    ]

    for (var i = 0; i < 5; i++) {
      $scope.noOfDays.push($scope.days[i]);
    }
    $scope.readData = function(subname, facname, days, hour) {
      alert('name : ' + subname + ', facname : ' + facname + ', days : ' + days + ', hours : ' + hour);
    }
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table class="table table-bordered table-striped table-hover" id="dataTable" ng-app="myApp" ng-controller="tableCtrl">
  <tr>
    <td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i>
      <BR>Day <i class="fa fa-long-arrow-down"></i>
    </td>
    <td width="100" align="center" ng-repeat="hour in hours" ng-bind="hour"></td>
  </tr>
  <tbody id="detailsstockid">
    <tr ng-repeat="days in noOfDays">
      <td width="100" align="center" style=" vertical-align:middle" ng-bind="days"></td>
      <td width="100" align="center" style="padding:0px;" ng-repeat="hour in hours">
        <table style="margin:0px; padding:0px; width:100%">

          <tr>
            <td>
              <select id="coy" name="coy" class="form-control" ng-model="subname">
                <option value="">Select Course</option>
                <option value="A">Theory 1</option>
                <option value="B">Theory 2</option>
                <option value="C">Theory 3</option>
                <option value="D">Theory 4</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <select id="coy" name="coy" class="form-control" ng-model="facname" ng-change="readData(subname, facname, days, hour);">
                <option value="">Select Faculty</option>
                <option value="A">Faculty 1</option>
                <option value="B">Faculty 2</option>
                <option value="C">Faculty 3</option>
                <option value="D">Faculty 4</option>
              </select>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

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

Implementing Pagination Logic in React Using Element Count

I am working on a React project that involves displaying a certain number of images and paginating them accordingly. For example, I want to display 9 images (arranged in a 3x3 grid) on the first page, another 9 on the second page, and so on. How can this b ...

javascriptreactjs

Encountered an issue during the migration process from AngularJS to Angular: This particular constructor is not compatible with Angular's Dependency

For days, I've been struggling to figure out why my browser console is showing this error. Here's the full stack trace: Unhandled Promise rejection: NG0202: This constructor is not compatible with Angular Dependency Injection because its dependen ...

angularangularjstypescriptsystemjsimport-maps

Using protractor and AngularJS to extract text content from two labels by identifying the elements

My app is organized like this: <ul ng-repeat="variable in link.variables" ng-show="SearchboxCtrl.showData" class="ng-scope"> <li class="ng-binding"> Member Since: </li> <span class="ng-binding"> 2010-01-01 </span></ul& ...

angularjsprotractor

jQuery show/hide functionality allows you to toggle the visibility of elements

I am looking to create a toggle button that expands the menu-wrapper width and hides the sidebar when clicked. Here is the initial CSS styling: #my-wrapper { Width:500px; } #sidebar-wrapper { width:200px; } Upon clicking the button, the CSS will update ...

javascriptjqueryhtmlcss

Performing unit testing on two services that reside in separate modules using the Jasmine testing framework

I have developed a service in Angular and you can view it on this PLUNKER. In the RouteService, I am injecting CommonService, $rootRouter, ModalService. Please note the following module structure : CommonService belongs to mysampleapp.core RouteS ...

javascriptangularjsunit-testingjasminekarma-jasmine

Troubleshooting an Issue with MediaStreamRecorder in TypeScript: Dealing with

I've been working on an audio recorder that utilizes the user's PC microphone, and everything seems to be functioning correctly. However, I've encountered an error when attempting to record the audio: audioHandler.ts:45 Uncaught TypeError ...

javascripthtmlaudiotypescriptmedia

Efficiently removing a duplicated component in Vue: A step-by-step guide

I am trying to find a way to target and remove a component that I duplicated using the v-for directive in my multiple stopwatch application. Currently, I can only delete the last duplicated component, but I want the ability to remove any targeted component ...

javascriptvue.jsduplicatescomponentsvuejs3

Troubleshooting compatibility issues between ExpressJS's res.render and AngularJS

I'm relatively new to Node.js, Express, and AngularJS. I'm currently working on a basic Sign-in feature that will redirect to another page upon successful sign-in. While I know I can use window.location for the redirection, I'm trying to uti ...

javascriptangularjsnode.jsexpressangularjs-routing

Error: Unable to execute fields.map function while generating a dynamic sitemap using next-sitemap module

I'm in the process of creating a dynamic sitemap for my website and here's the code I'm using: import { GetServerSideProps } from 'next'; import { getServerSideSitemap, ISitemapField } from 'next-sitemap'; import { makeSl ...

javascriptreactjstypescriptnext.jssitemap.xml

Aligning images with absolute CSS to text that is wrapping positions the images perfectly alongside the text content

My webpage has a long content section that resizes based on the browser width. Here's an example: <h1 id="loc1">Title</h1> <p>bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bod ...

javascriptjquerycsscss-position

Ways to delete a particular query parameter from a URL in Next.js

http://localhost:3000/?search=test&type=abc&category=xyz When searching for "test" along with the type and category, the URL changes accordingly to the link provided above. return router.push( { pathname: `/`, query: { ...

javascriptreactjsnext.js

Incorporating an Angular 2 component within an existing Angular 1 application

I have been following the steps outlined in https://angular.io/docs/ts/latest/guide/upgrade.html, specifically focusing on the "Using Angular 2 Components from Angular 1 Code" section. As part of this process, I created a file named hero-detail.component. ...

angularjsangular

What is the significance of static in react?

export class NavMenu extends Component { static displayName = NavMenu.name; constructor (props) { super(props); this.toggleNavbar = this.toggleNavbar.bind(this); this.state = { collapsed: true }; } I attempted to research the ...

javascriptreactjs

Executing a Long Press in JavaScript

My web application allows users to click on a field and have the text inside highlighted for copying. However, I have noticed that on Android devices, this action does not automatically trigger the copy context menu to appear. Instead, the user must manual ...

javascriptandroidiosmobile

The server returned a response that was void of any content

I have encountered an issue while trying to retrieve data from my server. The request works perfectly fine when tested with Postman, returning the expected data. However, upon implementing the request in my application, I receive an empty object with prope ...

javascriptreactjshttpexpress

Toggle the visibility of the identical div

I am facing a challenge with dynamically hiding and showing various div elements on my website. I have managed to achieve this using show/hide, but the issue arises when I need to show/hide some of the same fields repeatedly. The script works fine on the f ...

javascriptjqueryshow-hide

Restrict API access to hosted web applications using Node.js

https://i.stack.imgur.com/dDHhE.jpg I am running an admin panel on the domain admin.foo.com and hosting the API on api.foo.com One of my endpoints is GET - api.foo.com/all-products. No authentication header is needed to access it, but it should only be a ...

javascriptnode.jsreactjsexpressvuejs2

Dragging a stack of cards in a game of Solitaire using jQuery UI

I'm currently in the process of creating a Solitaire card game using Javascript. To enable dragging and dropping functionality for the cards, I am utilizing jQueryUI. In the example provided at http://jsfiddle.net/HY8g7/1/, you can see how the cards c ...

javascriptjqueryjquery-ui

JavaScript Node.js Error: Attempting to Read 'get' Property of Undefined

Struggling with an external GET request to an endpoint for general information? I've explored various Node methods and crafted the request below (with a few details altered). However, I encounter an issue when I run the https.get command. Despite suc ...

javascriptnode.js

Problem with the functionality of the "toggled" attribute in redux-form-material-ui

Currently, I am attempting to implement Toggle functionality from redux-form-material-ui: import { Toggle } from 'redux-form-material-ui' When the toggle value changes, it successfully updates in the store upon onChange: <Col xs='3&apo ...

javascriptreactjsreduxmaterial-uiredux-form