Having trouble retrieving the ng-model value from input in the controller

I am new to Angularjs and I am working with a datepicker in Ionic. After selecting a date, the input field is correctly getting the value of the selected date. However, I am facing an issue when trying to access this value in the Controller using $scope.

Below is my HTML code:

<div class="list">
  <label class="item item-input">
    <input type="text" data-ng-model="dateValue" disabled>
  </label>
</div>

<my-calendar display="dateValue" dateformat="'yyyy-MM-dd'"></my-calendar>
  <button id="fieldWork-button21" data-ng- click="saveFieldWork(fieldWork)"></button>

After submitting, I am calling the save function where I bind other values with the fieldWork object.

Here is my Controller.js code:

$scope.dateValue = "";
$scope.saveFieldWork = function(fieldWork) {
  fieldWork.fieldDate = $scope.dateValue;
  //other code
};

Although the correct date is displaying in the input field after selection, I am unable to retrieve the selected date value in the Controller. It currently shows an empty string instead. Can someone explain how to successfully obtain this value in the Controller? If AngularJS supports two-way data binding, why am I experiencing difficulties retrieving the ng-model value from HTML to the Controller?

javascriptangularjs

Answer №1

Accessing the fieldWork variable in HTML is restricted, so it cannot be used in the data-ng-click attribute.

<button id="fieldWork-button21" data-ng-click="saveFieldWork()"></button>

Please see this example:

(function() {
  'use strict';

  angular.module('player', [])
    .controller('MainCtrl', ['$scope', function($scope) {
      var fieldWork = {};
      $scope.saveFieldWork = function() {
        fieldWork["fieldDate"] = $scope.dateValue;
          console.log(fieldWork);
          //other code
        };
      }])

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<div ng-app='player'>
  <div ng-controller='MainCtrl'>
    <div class="list">
      <label class="item item-input">
            <input type="text" data-ng-model="dateValue">
     </label>
    </div>
    <button id="fieldWork-button21" data-ng-click="saveFieldWork()">Save</button>
  </div>
</div>

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

Mastering AngularJS Authentication: A Step-by-Step Guide for the First Submission

I have a login function in Angularjs, but it only works when I submit it for the second time. How can I fix this issue? Here is my code: .controller('LoginCtrl', ['$scope', '$rootScope', '$location', 'Authenti ...

angularjsauthentication

Using the axios response to assign data object in VueJS

When making an API call, I am receiving an expected error. While I am able to log the error message in the console, I am encountering issues trying to set a vuejs data variable with the response. Can anyone point out what I might be doing incorrectly? ...

javascriptvue.jsvuejs2axios

jquery expanding the width of the final element

Is there a way to increase the width of the last 'th' in a string? I want it to be the current width plus 20px. Here is the code on Fiddle var header="<th id='tblHeader_1' style='width: 80px;'><span>Id</span&g ...

javascriptjqueryhtmlcsstableheader

What is the method to disable response validation for image endpoints in Swagger API?

I'm working with a Swagger YAML function that looks like this: /acitem/image: x-swagger-router-controller: image_send get: description: Returns 'image' to the caller operationId: imageSend parameters: ...

javascriptnode.jsswaggerswagger-uiswagger-editor

The value of the progress bar in Bootstrap Vue cannot be retrieved using a function

I have implemented a progress bar using Bootstrap Vue. Here is the HTML code: <b-progress :value="getOverallScore" :max=5 variant="primary" animated></b-progress> The getOverallScore function calculates an average value based on three differe ...

javascriptvue.jsbootstrap-vue

What is causing the components to not re-render after a state change in React?

I am attempting to retrieve data from the Coin Market Cap API and showcase the details in simple cards. I have experimented with various methods and included comments to document my trials. Any assistance would be greatly appreciated. This is the Parent: ...

javascriptreactjs

Trying out a React component that relies on parameters for connection

Having an issue while attempting to test a connected react component that requires a props.params.id in order to call action creators. During the testing process, when checking if the component is connected to the store, an error "Uncaught TypeError: Canno ...

javascriptreactjsmocha.jsreduxkarma-mocha

Protractor Error: Identifier Unexpectedly Not Found

I've encountered a slight issue with importing and exporting files while working on Protractor tests. HomePage.js export default class HomePage { constructor() { this.path = 'http://automationpractice.com/index.php'; this.searchQ ...

javascriptnode.jsprotractorautomated-tests

Ways to obtain the latitudes and longitudes for various routes between a starting point and a destination

At the moment, I am successfully retrieving all the latitude and longitude coordinates from the source to destination location. However, I am only able to obtain 1 path using this method. Now, I would like to have the ability to choose a specific route p ...

javascriptc#asp.netgoogle-maps

Server experiencing problem with image uploads

Need Assistance with the Following Issue: Here is the code snippet in ASPX: <input type="Button" id="BtnUpload" class="button1" value="Upload Image" onclick="clickFileUpload();" /> JavaScript function on the ASPX page: function UploadImage(path) ...

javascriptjqueryasp.net

Creating a nested array of objects using a recursive function

How can I utilize my getChildren() function to create a larger function that takes my two main arrays objs and objRefs, and generates a single array of objs showcasing their parent/child relationship? Below are the two primary data arrays: const objs = [ ...

javascript

What is the best way to create an event listener that can identify when a boolean variable switches to true?

Let's say we have a variable var menu_ready = false;. We also have an ajax function that will change menu_ready to true once the ajax operations are completed: // code snippet to set up event listener $(...).load(..., function() { ... menu_r ...

javascripteventsevent-handlingjquery

Guide to accessing object items in v-for in VueJs

Upon inspection, the following results are being displayed: https://i.sstatic.net/oF4Qe.png https://i.sstatic.net/21aHB.png In the Vue template code provided: <select class="form-select" v-model="post_format.wpml_language"> <option v-for="(l ...

javascriptvue.js

Timepicker Bootstrapping

I've been searching for a time picker widget that works well with Bootstrap styling. The jdewit widget has a great style, but unfortunately it comes with a lot of bugs. I'm on a tight deadline for my project and don't have the time to deal w ...

javascripthtmltwitter-bootstraptimepicker

"Exploring the interactivity of touch events on JavaScript

Hi there, I'm currently facing an issue with the touch events on my canvas. While the mouse events are functioning correctly and drawing as expected, incorporating touch events seems to be causing a problem. When I touch the canvas, the output remains ...

javascripthtmlcanvastouchoffset

Connecting Vue.JS page to my existing HTML page: A step-by-step guide

While developing my website, I faced a challenge with the structure. The home page was built using traditional HTML/CSS, while the other pages were created in Vue.js. Is there a method to connect these two different types of files? For instance, can I inc ...

javascripthtmlvue.js

Meteor application: The correct method for fetching a single document from a collection on the client side

Currently in my meteor app, I am saving the unique id of the client within a collection named UserNavigationTracker: { "clientId" : "xxNfxxPGi7tqTbxc4", "currentWizard" : "IntroductionWizard", "currentStep" : "Step-1", "_id" : "ifBJ688upEM ...

javascriptmeteor

Upon submitting the form, the dynamic dependent drop-down list fails to offer any available options

Hey there, I've got a form with two drop-down lists: id="dd-1" & id="dd-2". The options in id="dd-2" are generated from the database based on what's selected in id="dd-1"; I'm using onChange=getChildOf(this.value) in id="dd-1" for this ...

javascriptphpjquerymysqlajax

Ways to switch classes within a loop of elements in vue.js

I'm just starting to learn vue.js and I'm working on a list of items: <div class="jokes" v-for="joke in jokes"> <strong>{{joke.body}}</strong> <small>{{joke.upvotes}}</small> <button v-on:click="upvot ...

javascriptvue.js

An easy guide to animating multiple sections of progress bars individually in Bootstrap

My Bootstrap code successfully animates a section of progress bars when the user views it. However, it currently animates all progress bars on the page rather than just those in the viewed section. This means that when the user moves to another section, th ...

javascriptcsstwitter-bootstrap-3progress-barjquery-waypoints