Unable to get ng-model value from input to controller

Question

I am new to Angularjs.I have a datepicker in ionic.After selecting date input is getting value of the selected date.Now i am trying to acces this value in Controller by using $scope but i am unable to access.

Here is my html

<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>

I am calling save function after submit.I am binding other values with fieldWork object.

Here is the Controller.js

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

Here I am not able to get selected Date value. But in the input after selecting date it is displaying correct date.

At present it is displaying empty string instead of selected date. Can anyone tell how to get this value into Controller? If AngularJs supports two way data binding then why am I not able to get ng-model value from html to Controller?

Do you have an `ng-repeat` that could be causing the data hiding problem? Possible duplicate of [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). — georgeawg, May 19 '18 at 00:41

score 0 · Answer 1 · answered May 18 '18 at 14:40

0

You don't have access to fieldWork variable in html, So you can not use it in data-ng-click.

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

Look this

(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>

answered May 18 '18 at 14:40

Saeed

5,413
3
26
40

Then how can I pass other data.Right now i am binding some other data with fieldWork.They are binding successfully and I am able to save also.The problem is only with date and not with fieldWork.Only date is not getting saved.Other data are saved – Sachin HR May 18 '18 at 14:44
Did you bind values from a variable which is not belong to `$scope` of controller?? You create an element in html which its model is something like `fieldWork.KEY` and fieldWork is a local variable in controller? @SachinHR – Saeed May 18 '18 at 14:47
I am binding other values with fieldWork and passing to backened.It is getting saved – Sachin HR May 18 '18 at 14:48
Why you do not define fieldWork in `$scope.fieldWork = {}` and directly bind data to it?? @SachinHR – Saeed May 18 '18 at 14:50
Can you provide a plunker for your question? @SachinHR – Saeed May 18 '18 at 14:52

Unable to get ng-model value from input to controller

1 Answers1