angularjs: how to connect input date picker to parameters value

Having trouble with my datepicker input values not being passed as parameters in Angular and eventually to a C# parameter. Need help with setting up datepicker input and passing the values correctly.

<div layout="column">

    <md-content md-primary>
        <md-toolbar layout="flex>
            <button ng-click="toggleSidenav('left')" class="menuBtn">
                <span class="visually-hidden">Menu</span>
            </button>
            <h1>selling Order History</h1>
        </md-toolbar>
        <div layout="row" style="height:100%" flex>
            <md-sidenav layout="column" ng-class="lockedOpen" class="md-closed md-sidenav-left md-whiteframe-z2" md-component-id="left>
                <div>
                </div>
            </md-sidenav>
            <md-content ng-controller="sellingListCtrl" layout="column" flex class="md-padding>
                <md-tabs class="md-primary clearfix" md-selected="0" flex>              
                    <md-tab label="selling Orders">    

                        <input type="date" ng-model="filter.fromDate" />
                        <input type="date" ng-model="filter.toDate" />

                ...

Check out the accompanying .js file:

var sellingApp = angular.module('sellingApp', ['ngMaterial', 'ui.router', 'angularMoment', 'breeze.directives', 'breeze.angular', 'ui.bootstrap.pagination']).run(['breeze', function (breeze) { }]);;


sellingApp.controller('sellingListCtrl', [
    '$scope', '$filter', '$location', 'breeze','sellingService',
    function ($scope, $filter, $location, breeze, sellingService) {

        $scope.pageLoaded = true;
        $scope.lists = [];
        $scope.loadselling = function () {
            $scope.pageLoaded = false;
            $scope.filter = {};
            //$scope.filter.fromDate = "1/1/2015";
            //$scope.filter.toDate = "1/1/2015";


            sellingService.salesstatus($scope.filter).then(function (data) {
                $scope.lists = data;
                $scope.totalItems = data.totalItems;
                if (data!=null) {
                    $scope.pageLoaded = true;                      
                }
            });
        }
        //$scope.init();
    }
]);

sellingApp.factory('sellingService', ['$filter','$http', function ($filter, $http) {

    function salesstatus(filter) {
        var f = filter;
        console.log(breeze);

        return $http({
            method: 'GET',
            url: '/Services/SalesStatus',
            params: { fromDate: f.fromDate, toDate: f.toDate, sParts: true }
        }).then(function (result)
        { return result.data; })

        //.catch(function (s) { console.log(s); });
    }
    return {
        salesstatus: salesstatus

    };
}]);

Answer №1

Make sure to set up $scope.filter before calling the $scope.loadselling function:

sellingApp.controller('sellingListCtrl', [
    '$scope', '$filter', '$location', 'breeze','sellingService',
    function ($scope, $filter, $location, breeze, sellingService) {

        $scope.pageLoaded = true;
        $scope.lists = [];
        $scope.filter = {
           fromDate: '',
           toDate: ''
        };
        $scope.loadselling = function () {
            $scope.pageLoaded = false;

            sellingService.salesstatus($scope.filter).then(function (data) {
                $scope.lists = data;
                $scope.totalItems = data.totalItems;
                if (data!=null) {
                    $scope.pageLoaded = true;                      
                }
            });
        }
        //$scope.init();
    }
]);

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

What is the method for retrieving the data from an XMLHttpRequest response?

Is there a way to use jQuery to query the result of an XMLHttpRequest? For example, let's say I have this code snippet: $.get('somepage.htm', function(data) { console.log($("div.abc").text()); }); The issue is that $("div.abc").text() i ...

Changing Highcharts Donut Chart Title Text via Legend Item Click in React

Utilizing React. In my Highcharts donut chart, there are 5 legend items of type 'number' and a 'title text' (also type: number) displayed at the center. The title text represents the sum of all the legend items. However, when I click o ...

Creating bidirectional data binding with isolated scopes in AngularJS - a comprehensive guide

directive('confButton', function () { return { restrict: 'EA', replace: false, scope: { modalbtntext: '@', btntext: '@&ap ...

What is the best way to trigger a function after the v-model has been updated

When attempting to filter an array of objects in Vue using input, I encountered issues with Salvattore not functioning correctly for building a grid of the filtered elements. It seems that calling the rescanMediaQueries() function after changes to my v-mod ...

Using jQuery and AJAX to dynamically add data to POST parameters

Hello, I have a question that may sound like one from a newbie. I am trying to figure out how to insert a variable into a parameter for a POST request instead of simply writing the number in directly: var x = 3; id=(the var x needs to be here)&appid=4 ...

Ways to specifically load a script for Firefox browsers

How can I load a script file specifically for FireFox? For example: <script src="js/script.js"></script> <script src="js/scriptFF.js"></script> - is this only for Firefox?? UPDATE This is how I did it: <script> if($. ...

Execute the function upon clicking

When I click on an icon, I want it to blink. This is the code in my typescript file: onBlink() { this.action = true; setTimeout(() => { this.action = false; }, 1000) return this.action }; Here is how the action is declared in my ...

Transferring the value of my PHP variable to a JavaScript file

Hello everyone, <script src="../../record/recordmp3.js?id=<?php echo $_GET['id'];?>&&test_no=<?php echo $_GET['test_no'];?>"></script> <script type="text/javascript" data-my_var_1="some_val_1" data-m ...

Discovering the point of exit for a mouse from an image

Visit this website to see the effect in action: I am curious about how the image scrolls into and out of the direction where the mouse enters and leaves. Can you explain how this is achieved? ...

Attempting to provide varying values causes If/Else to become unresponsive

I've implemented a function that scans a file for a specific term and then outputs the entire line as a JSON object. Strangely, when I include an else statement in the logic, an error occurs: _http_outgoing.js:335 throw new Error('Can\& ...

Withdrawal of answer from AJAX request

Is there a way to create a function that specifically removes the response from an AJAX call that is added to the inner HTML of an ID? function remove_chat_response(name){ var name = name; $.ajax({ type: 'post', url: 'removechat.php ...

Comparing Arrays with jQuery

I am currently working on a tic-tac-toe project that involves a simple 3x3 grid. I have been storing the index of each selected box in an array for each player. However, I am facing difficulty in comparing my player arrays with the winner array to determin ...

I'm having trouble sending a string to a WCF service using jQuery AJAX. What's preventing me from sending strings of numbers?

Something strange is happening with my web service when using jquery ajax - I can only pass strings containing numbers. This was never an issue before as I would always just pass IDs to my wcf service. But now that I'm trying something more complex, I ...

Error encountered in Angular 7.2.0: Attempting to assign a value of type 'string' to a variable of type 'RunGuardsAndResolvers' is not allowed

Encountering an issue with Angular compiler-cli v.7.2.0: Error message: Types of property 'runGuardsAndResolvers' are incompatible. Type 'string' is not assignable to type 'RunGuardsAndResolvers' This error occurs when try ...

How to Implement Autoplay Feature in YouTube Videos with React

I'm having trouble getting my video to autoplay using react. Adding autoplay=1 as a parameter isn't working. Any ideas? Below is the code I am using. <div className="video mt-5" style={{ position: "relative", paddingBot ...

The scrolling speed of my news div is currently slow, and I am looking to increase its

This is the news div with bottom to top scrolling, but it is slow to start scrolling. I want to increase the speed. The current behavior is the div appears from the y-axis of the system, but I want it to start exactly where I define. The scrolling div is ...

RecoilRoot from RecoilJS cannot be accessed within a ThreeJS Canvas

Looking for some guidance here. I'm relatively new to RecoilJS so if I'm overlooking something obvious, please point it out. I'm currently working on managing the state of 3D objects in a scene using RecoilJS Atoms. I have an atom set up to ...

How come I am receiving a null value for isMatch from bcrypt compare even though the two password strings match exactly?

Currently, I am attempting to authenticate a user based on a password. My approach involves using bcrypt compare to check if the user's requested password matches one stored in a MongoDB database. Despite the passwords being identical, I keep receivin ...

"Learn how to dynamically update the user interface in express.js using handlebars without having to refresh the

As a newcomer to using express.js and Handlebars, I am faced with the challenge of implementing autocomplete functionality. Specifically, I want to enable autocompletion in a text input field without triggering a page refresh when users interact with it. C ...

How can I implement pagination using jQuery?

I'm looking to incorporate jQuery pagination in my CodeIgniter project. After doing some research on the CodeIgniter forum and CodeIgniter AJAX Pagination Example/Guideline, I came across suggestions to check out a solution on TOHIN's blog. Howe ...