如何从Angular-Material日期选择器取日期传入$http参数？解决未定义错误

错误原因解析 #

你碰到的TypeError: Cannot read property 'myDate' of undefined，核心问题是**$scope.data对象没有提前初始化**。AngularJS的ng-model需要绑定到一个已存在的对象属性，当日期选择器尝试给data.myDate赋值时，找不到data这个父对象，就会抛出这个错误。

分步解决方案 #

• 提前初始化$scope.data对象
  在你的控制器中，先声明$scope.data为一个空对象，给myDate属性提供一个可绑定的父容器：

  app.controller('YourController', function($scope, $http) {
    // 初始化data对象，避免undefined错误
    $scope.data = {};
  
    // 后续的$http请求逻辑写在这里
  });
  

• 正确获取日期并传入$http参数
  现在$scope.data.myDate可以正常访问了，发起请求时直接引用即可。另外要注意：Angular-Material日期选择器返回的是原生Date对象，如果后端接口需要特定格式的字符串（比如YYYY-MM-DD），可以用AngularJS内置的$filter服务转换：

  // 记得在控制器中注入$filter服务
  app.controller('YourController', function($scope, $http, $filter) {
    $scope.data = {};
  
    // 定义发起请求的函数
    $scope.sendDateRequest = function() {
      // 可选：将Date对象转为指定格式的字符串
      const formattedDate = $filter('date')($scope.data.myDate, 'yyyy-MM-dd');
  
      $http({
        method: 'GET',
        url: 'theurltobeused',
        params: {
          // 根据后端需求选择传格式化后的字符串或原始Date对象
          pdate: formattedDate || $scope.data.myDate
        }
      }).then(function(response) {
        // 请求成功后的处理逻辑
        console.log('请求返回数据:', response.data);
      }).catch(function(error) {
        // 请求失败的错误处理
        console.error('请求出错:', error);
      });
    };
  });
  

• 关联日期选择器与请求触发（可选）
  如果想让用户选择日期后自动发起请求，给日期选择器添加ng-change指令即可：

  <div flex="20">
    <md-datepicker 
      ng-model="data.myDate" 
      md-placeholder="Enter date" 
      md-min-date="ctrl.minDate" 
      md-max-date="ctrl.maxDate"
      ng-change="sendDateRequest()">
    </md-datepicker>
  </div>
  

关键注意事项 #

• 始终确保ng-model绑定的父对象已初始化，这是AngularJS中避免undefined错误的基础规范。
• 一定要根据后端接口的要求决定是否需要格式化日期：如果后端能直接解析Date对象的默认字符串形式，直接传$scope.data.myDate就行；如果需要特定格式，务必用$filter或自定义函数转换后再传入。

内容的提问来源于stack exchange，提问作者beaumondo