Question

我正在用angularjs材料构建一个CRUD应用程序。因此，当我要添加新用户时，生日输入必须是<md-datepicker>标记。

<md-datepicker ng-model="add.user.BirthDate" md-placeholder="Enter date"></md-datepicker>

这是HTML标记。

但是当我要编辑用户时，会出现一个错误，提示模型必须是日期

<md-datepicker ng-model="edit.user.BirthDate" md-placeholder="Enter date"></md-datepicker>

这是为了编辑，我在对话框中称呼功能，因为必须更新用户

////EDIT USER

//POP UP
$scope.showEdit = function (ev, user) {
 $mdDialog.show({
    controller: SampleController,
    templateUrl: 'app/main/sample/edit.tmpl.html',
    parent: angular.element(document.body),
    targetEvent: ev,
    clickOutsideToClose: true,
    fullscreen: $scope.customFullscreen,
    locals: {
      user: user,
      //map: map,
      editUser: editUser
    },
    bindToController: true,
    controllerAs: 'edit'
  });


  //FUNC
  function editUser() {



    $http({
      method: 'PUT',
      url: 'http://192.168.23.65/DetyreAPI/api/Client/UpdateClient',
      data: {
        FirstName: user.FirstName,
        LastName: user.LastName,
        BirthDate: user.BirthDate,
        Address: user.Address,
        Latitude: user.Latitude,
        Longitude: user.Longitude
      },

      headers: {
        'Content-Type': 'application/json'
      }


    }).then(function successCallback(response) {

      $mdDialog.hide();
      $scope.showUpdateAlert_Success();


    }, function errorCallback(response) {
      $mdDialog.hide();
      $scope.showUpdateAlert_Error();
    });
  }



}

还有用于添加新用户的功能和对话框

///ADD NEW USER

//POP UP
$scope.showAdd = function (ev, user) {

  $mdDialog.show({
    controller: SampleController,
    templateUrl: 'app/main/sample/add.tmpl.html',
    parent: angular.element(document.body),
    targetEvent: ev,
    clickOutsideToClose: true,
    fullscreen: $scope.customFullscreen,
    locals: {
      user: user,
      addUser: addUser
    },
    bindToController: true,
    controllerAs: 'add'
  });
}

//FUNC
function addUser(value) {



  $scope.user = {

  };




  $http({

    method: 'POST',
    url: 'http://192.168.23.65/DetyreAPI/api/Client/AddClient',
    data: value,
    headers: {
      'Content-Type': 'application/json'
    }


  }).then(function successCallback(response) {

    console.log(response.data);
    if (response.data.message === 'Ju shtuat nje kontakt me sukses!') {
      $scope.showData($scope.user);
      $mdDialog.hide();
      $scope.showAddAlert_Success();
    } else {
      $scope.showAddAlert_Error();
    }

  }, function errorCallback(response) {
    $mdDialog.hide();
    $scope.showAddAlert_Error();
  });

}

Answer 1

问题是您的add.user.BirthDate模型不是有效的 date对象。您的模型值为：1999-01-01，而有效的 date对象看起来像这样

Fri Sep 21 2018 15:06:23 GMT+0200 (Midden-Europese zomertijd)

因此要将模型转换为有效的 date对象，您可以执行以下操作。

创建一个自定义指令，该指令会将日期转换为 date对象

.directive('mdDatepicker', function () {
  function link(scope, element, attrs, ngModel) {

    // This will format the model
    ngModel.$parsers.push(function(valueFromInput) {

      // Format displayed value in timestamp format and store it to ngModel
      return new Date(valueFromInput);
    });
  }
  return {
    require: 'ngModel',
    link: link,
    restrict: 'EA',
    priority: 1
  }
});

ng-model值必须是日期对象

1 个答案: