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

Question

我正在使用角度日期选择器指令。 我想获取通过日期选择器和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());
    }



  }]);

矮人

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访问某些angular.element 。 不建议将其用于视图控制器，因为您已经可以通过控制器属性访问DOM绑定。 只有在特殊情况下， angular.element应该保留供指令使用。

我建议像在HTML中那样使用控制器 ，然后像这样修复控制器：

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

更新的插件-https://plnkr.co/edit/j1RTh7NlxADieVEnwx1q ? p = preview

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

问题描述

3 个解决方案

解决方案1
0 2016-07-08 13:43:24

解决方案2
0 2016-07-08 13:45:54

解决方案3
0 已采纳 2016-07-08 13:47:49

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

问题描述

3 个解决方案

解决方案1 0 2016-07-08 13:43:24

解决方案2 0 2016-07-08 13:45:54

解决方案3 0 已采纳 2016-07-08 13:47:49

解决方案1
0 2016-07-08 13:43:24

解决方案2
0 2016-07-08 13:45:54

解决方案3
0 已采纳 2016-07-08 13:47:49