如何從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