Angularjs :使用 ng-model 的 angularjs 输入中的日期类型返回未定义

大家好，我在使用日期类型和ng模型时遇到了一些问题。在我的索引中.html我有这样的输入字段：

<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>

和我的控制器：

$scope.myExample = function() {
    console.debug('date : ', $scope.myData.date);
}

在我的控制台中，我收到日志"日期：未定义"

为什么我有未定义的值似乎是什么问题？谢谢

顺便说一下，我使用"引导日期选择器"

你必须初始化你的myData对象

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myData = {}; //Create the object 
  $scope.myExample = function() {
    console.log('date : ', $scope.myData.date);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input class="form-control" type="date" id="date" ng-model="myData.date" />
  <button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>
</div>

以下是使用引导日期选择器所需的解决方案

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.myData = {}
    $scope.myData.date = new Date();
    $scope.myExample = function() {
     console.debug('date : ', $scope.myData.date);
      console.log('date : ', $scope.myData.date);
    }
});

<html>
<script src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<body>
<script>
$('#date').datepicker() 
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>
</div>
</body>
</html>

请运行上面的代码片段

这是一个工作演示

另一种解决方案是通过函数传递日期值。

这就是我实现这一目标的方式。

法典：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <link rel="stylesheet" href="style.css">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body ng-controller="myController">
    <input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample(myData.date)">Submit</button>
<script>
  angular.module("myApp",[])
  .controller("myController",function($scope){
    $scope.myExample = function(date) {
      console.log(date);
    alert(date);
}
  })
</script>
  </body>
</html>

您还可以使用 angularjs 中可用的日期过滤器。请参阅此处的文档https://docs.angularjs.org/api/ng/filter/date

对我来说

，在输入标签中插入一个占位符属性很有帮助，其值例如：

占位符="

yyyy-MM-dd"（因为这也适用于我：占位符="dd.MM.yyyy"）

<input class="form-control" type="date" id="date" ng-model="myData.date" placeholder="dd.MM.yyyy" />

之后，ng-model 正确处理了它并存储了值。实际上，在文档中提到了示例 https://docs.angularjs.org/api/ng/input/input%5Bdate%5D

相关内容

最新更新

热门标签：