如何从angular.js的输入中获取价值
[英]how to get value from input in angular.js
问题描述
I am working with angular date picker directive. 
我正在使用角度日期选择器指令。 I would like to get the value of the date that is entered via date picker and console.log it. 我想获取通过日期选择器和console.log输入的日期值。 But somehow everything I have tried so far does not work. 但是到目前为止，我尝试过的所有方法都不起作用。
My code: 我的代码：
HTML: 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 JS
angular
.module('Demo', ['moment-picker'])
.controller('DemoCtrl', ['$scope', function ($scope) {
$scope.onclick = function(){
console.log(angular.element(document).find('#date').val());
}
}]);
3 个解决方案
解决方案1
0 2016-07-08 13:43:24
its not like jquery where you select the value out of the dom. 它不像jQuery，您从dom中选择值。
Setting 设置
ng-model="ctrl.input"
sets up the two way data binding already. 已经设置了两种方式的数据绑定。
What you want to do is change the js to the following 您要做的是将js更改为以下内容
angular
.module('Demo', ['moment-picker'])
.controller('DemoCtrl', ['$scope', function ($scope) {
var ctrl = this;
$scope.onclick = function(){
console.log(ctrl.input);
}
}]);
解决方案2
0 2016-07-08 13:45:54
This will console log the input. 这将控制台记录输入。
<!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);
}
}]);
解决方案3
0 已采纳 2016-07-08 13:47:49
You're using controller-as syntax in your HTML but you haven't defined your controller as such.
您在HTML中使用controller-as语法，但尚未这样定义控制器。 You're controller is still using the older $scope-as-controller syntax. 您的控制器仍在使用旧的$ scope-as-controller语法。 Also you had another
ng-modelpointing toctrl.inputon your submit button which could interfere with things so removed that.另外，在提交按钮上还有另一个ng-model指向ctrl.input，这可能会干扰已删除的内容。As another person stated you were trying to access something via
angular.element.正如另一个人所说，您正在尝试通过angular.element访问某些angular.element。 That's not recommended for view controllers because you have access to the DOM bindings already via the controller properties.不建议将其用于视图控制器，因为您已经可以通过控制器属性访问DOM绑定。 angular.elementshould be reserved for use in directives, and only in special cases.只有在特殊情况下， angular.element应该保留供指令使用。
I'd suggest going with controller-as like in your HTML and then fixing your controller like so: 我建议像在HTML中那样使用控制器 ，然后像这样修复控制器：
angular
.module('Demo', ['moment-picker'])
.controller('DemoCtrl', ['$scope', function ($scope) {
var ctrl = this
ctrl.onclick = function(){
console.log(ctrl.input);
}
}]);
updated plunker - https://plnkr.co/edit/j1RTh7NlxADieVEnwx1q?p=preview 更新的插件-https://plnkr.co/edit/j1RTh7NlxADieVEnwx1q ? p = preview
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.