Controller does not have a defined ng-model parameter

the ng-model I'm using in my HTML contains a dot. Let's take a closer look

step1.html file

<div class="col-xs-12 col-sm-9">
    <select id="plateId" ng-model="selectedPlate.plate" ng-options="plate.id as (plate.wafer_id + ' - ' + plate.serial_number) for plate in plates" />
    <option value="">Select</option>
    </select>
</div>

This is simply a form-wizard using ui-router.

In my other HTML file, the user presses a button in step 3.

<button class="btn btn-success btn-next" ng-click="storePlatesInspection()">
    Submit
    <i class="ace-icon fa icon-on-right"></i>
</button>

And here is my controller.

angular.module('sxroApp')
    .controller('plateInspectionCtrl', function ($scope, PlatesInspectionFactory, PlatesFactory, PlateQualityFactory, EquipmentStatusCodesFactory, PlateContainersFactory, $location) {
    // object to hold all the data for plate inspection
    $scope.data = [];

    $scope.selectedPlate = {};

    $scope.inspectionData = {

        equipment_status_codes_id: 1,
        plate_container_id: 1,
        plate_container_slot: 34,
        plate_quality_id: 1

    }

    PlatesFactory.query(function (plates) {
        $scope.plates = plates;

    });

    /*    $scope.getSelectedPlate = function(plate)
            {
              $scope.data.push({

                  plate_id : plate.id
             });*/

    //  console.log($scope.selectedPlate.id)
    //alert(item.wafer_id)
    //PlatesInspectionFactory.update( {id : $scope.plateid[0].plate_id}, $scope.inspectionData)

    PlateQualityFactory.query(function (platequality) {
        $scope.platequality = platequality;

    })

    PlateContainersFactory.query(function (plateContainers) {
        $scope.plateContainers = plateContainers;

    });

    EquipmentStatusCodesFactory.query(function (statuscodes) {
        $scope.statuscodes = statuscodes;
    });

    $scope.storePlatesInspection = function () {

        alert($scope.selectedPlate.plate.id); // not working
        alert($scope.selectedPlate.plate.$id); // not working

    }
});

I also attempted

alert($scope.selectedPlate.plate); // undefined is the result. 

I followed the advice provided in this article

Ng-model does not update controller value

Can anyone point out what I might be doing wrong?

here is an image of the form form

I am attempting to use the model to capture the user's selection during the wizard process.

update #1: I have made some updates to the code above.

Answer №1

Update your HTML to include:

<select id="plateSelection" 
        ng-model="selectedPlate.plate" 
        ng-options="plate for plate in availablePlates"/>
     <option value="">Choose plate</option>
</select>

Explore an alternative method for dropdown list bindings

Answer №2

It's unclear to me why

alert($scope.selectedPlate.plate);
is failing to function properly. By assigning the value of your ID property to $scope.selectedPlate.plate, you are essentially transferring a numerical value to it instead of a complete "plate object" containing an ID property.

Answer №3

Although I have not had the chance to work with ui-router, it is possible that you may have included a directive or a routing path along with the controllerAs property. This means that if controllerAs is specified, the variables stored on $scope within the controller would be accessed using the controllerAs value in the HTML view.

For instance, if the directive was defined as follows:

angular.module('sxroApp')
    .directive('plateInspectionDirective', function () {
        return {
            restrict: 'A',
            templateUrl: 'plateInspection.html',
            controller: plateInspectionCtrl,
            controllerAs: 'plateInspection',
            scope: {
            }
        };
    });

Then in the view, you would need to use the controller name "plateInspection" to access the variables within its scope.

<div class="col-xs-12 col-sm-9">
<select id="plateId" ng-model="plateInspection.selectedPlate.plate" ng-options="plate.id as (plate.wafer_id + ' - ' + plate.serial_number) for plate in plateInspection.plates" />
<option value="">Select</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

Tips for minimizing the transfer time of large arrays using ajax

https://i.stack.imgur.com/IP0oe.pngDescription I am currently working on transferring a JSON object from the server to the client using PHP and JavaScript via AJAX. The JSON object contains a large array (200x200) of integers. The server is running on lo ...

Issue: NextRouter is not mounted when the client is used

After implementing use client, I encountered the following error: Error: NextRouter was not mounted error. However, upon removing use client, a different error surfaced: Error when use client is removed: ReactServerComponentsError: A component requirin ...

Serialize the elements within an array using JSON.stringify

I'm trying to convert an object into a string, but for some reason it's not working correctly: function httpRequest(url) { this.url = url; this.headers = []; } var req = new httpRequest("http://test.com"); req.headers["cookie"] = "version=1 ...

Angular 5 arrays within arrays

I'm currently facing an issue with using ngFor on a nested JSON output. The outer loop is working as expected, but the inner loop is not functioning properly. Below is my code snippet: Typescript file import { Component, OnInit } from '@angula ...

Event triggered only upon initial click

I am experiencing an issue with my category list. When I click on a category to trigger an AJAX request for the first time, the request does not go through. However, when I click on the same category a second time, it works perfectly. Below is the code sni ...

Error encountered: SyntaxError - Missing semicolon before statement in AJAX call while processing JSON data

I am currently in the process of making a cross domain JSONP call utilizing this code snippet: jQuery.ajax({ async: true, url: 'http://mnews.hostoi.com/test.json', dataType: 'jsonp', method: "GET&quo ...

Mastering the correct application of both Express's res.render() and res.redirect()

After implementing a res.redirect('page.ejs');, my browser is displaying the following message: Cannot GET /page.ejs In my routes file, I have not included the following code structure: app.get('/page', function(req, res) { ...

Sorting custom data in a Vue data table, prioritizing null values to be displayed

Currently, in my VueJS v-data-table setup, I am facing a challenge with custom sorting functions. The table has both numeric and string columns, with some null values scattered throughout. My goal is to sort the data by placing null values at the end of ea ...

How to retrieve the data variable in Vue JS script

I recently started using vue.js and I'm working with version 2.5.13. In my component file script, I am trying to access a data variable but it keeps returning as undefined. The id attribute in the component is displaying the correct value, however w ...

Ways to toggle the visibility of a div with a click event?

I am working on a project where I have a list view of items. I want to implement a feature where when a user clicks on an item, a hidden div below it will appear with options like price, quantity, and other details. I am looking for guidance on how to achi ...

Upgrade your AngularJS codebase with Angular 2+ services

Attempting to adapt an Angular 2+ service for use in an AngularJS project. app/users.service.ts import { Injectable } from '@angular/core'; @Injectable() export class UsersService { private users: any = [ { id: 1, name: 'john&a ...

Disabling the scrollTop() effect following a click event with onClick()

Utilizing the scrollTop() event to toggle the visibility of a div at a specific position and also using the onClick() event to permanently hide the div. While the events are functioning properly, an issue arises when scrolling the page causing the div to r ...

New messages are revealed as the chat box scrolls down

Whenever a user opens the chatbox or types a message, I want the scroll bar to automatically move down to show the most recent messages. I came across a solution that seems like it will do the trick: The issue is that despite implementing the provided cod ...

Retrieve information from the input field and then, upon clicking the submit button, display the data in the

When a user inputs their name, email, subject, text, and telephone number, I want to send an email with that data. The email will be sent to a specific email address, such as [email protected]. This process is crucial for a hotel website, where the em ...

Enabling or disabling a button dynamically in Ionic based on a conditional statement

I am looking to dynamically enable or disable buttons based on specific conditions. The data is retrieved from Firebase, and depending on the data, I will either enable or disable the button. For example, if a user passes the First Quiz, I want to enable ...

What is the best way to implement the <b-pagination-nav> component in Bootstrap Vue?

I'm eager to begin using the featured in this guide. However, I'm struggling to figure out how to incorporate the tag into my website. The tutorial's instructions are unclear and as a newcomer, I'm finding it difficult to make it func ...

Designing a space using Three.js and cannon.js

Currently exploring Three.js and cannon.js, I've been attempting to construct a basic room without much luck. Referencing this sample, my goal is to include walls and a ceiling. What's the simplest approach to achieve this? At the moment, my code ...

Is it just me or does Img never work, no matter what the "src" is?

I am implementing Google's React example of a "Complex Grid" (located here) to create a Card-like layout. This is how the code appears: return ( <div className={classes.root}> <Paper className={classes.paper} ...

What is the best way to handle waiting for a React context provider that requires time to initialize the value it provides?

In my Next.js application, I have a global context that takes five seconds to compute the value provided: import React, { useContext, useEffect, useState } from 'react'; const GlobalContext = React.createContext(); export const GlobalContextPro ...

The 'v-model' directive necessitates a valid attribute value for the left-hand side (LHS)

I am facing an issue with my Vue application. I have a table where each row has its own unique id. I need to show or hide certain elements based on a condition in the v-model directive which compares the row id with a value in the model. The current code s ...