Question

我正在使用angular date picker指令。我想获得通过日期选择器和console.log输入的日期值。但不知怎的，到目前为止我所尝试的一切都无效。

我的代码：

HTML：

 <input class="form-control"
       ng-model="ctrl.input"
       ng-model-options="{ updateOn: 'blur' }"
       placeholder="Select a date..."
       moment-picker="ctrl.input" id='date'>

    <button ng-model='ctrl.input' ng-click="onclick()">submit</button>

JS

angular
  .module('Demo', ['moment-picker'])
  .controller('DemoCtrl', ['$scope', function ($scope) {
    $scope.onclick = function(){
      console.log(angular.element(document).find('#date').val());
    }



  }]);

plunker

Answer 1

它不像jquery，你可以从dom中选择一个值。

设置

  ng-model="ctrl.input"

已经设置了双向数据绑定。

您要做的是将js更改为以下

angular
  .module('Demo', ['moment-picker'])
  .controller('DemoCtrl', ['$scope', function ($scope) {
    var ctrl = this;
    $scope.onclick = function(){
      console.log(ctrl.input);
    }

  }]);

Answer 2

这将控制台记录输入。

 <!DOCTYPE html>
    <html ng-app="Demo">
      <head>
    <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular Moment Picker - Basic demo</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="//rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.css" rel="stylesheet">
  </head>
  <body ng-controller="DemoCtrl as ctrl" style="margin:30px;" ng-cloak>

    <input class="form-control"
       ng-model="ctrl.input"
       ng-model-options="{ updateOn: 'blur' }"
       placeholder="Select a date..."
       moment-picker="ctrl.input" id='date'>

    <button  ng-click="onclick()">submit</button>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.js"></script>
    <script src="//rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.js"></script>
    <script src="script.js"></script>
  </body>
</html>  




angular.module('Demo', ['moment-picker']).controller('DemoCtrl', ['$scope',function ($scope) {
  $scope.onclick = function(){
  console.log($scope.ctrl.input);
  }   
}]);

Answer 3

您在HTML中使用 controller-as 语法，但您尚未定义控制器。您的控制器仍在使用旧的$ scope-as-controller语法。
您还有另一个ng-model指向提交按钮上的ctrl.input，可以干扰已移除的内容。
正如另一个人所说，您试图通过angular.element访问某些内容。这不建议用于视图控制器，因为您已经可以通过控制器属性访问DOM绑定。 angular.element应保留用于指令，并且仅在特殊情况下使用。

我建议像在HTML中一样使用 controller-as ，然后像这样修复你的控制器：

angular
.module('Demo', ['moment-picker'])
.controller('DemoCtrl', ['$scope', function ($scope) {
   var ctrl = this 
   ctrl.onclick = function(){
      console.log(ctrl.input);
   }
}]);

更新了plunker - https://plnkr.co/edit/j1RTh7NlxADieVEnwx1q?p=preview

如何从angular.js中的输入中获取值

3 个答案: