how to get value from input in angular.js
Question
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. But somehow everything I have tried so far does not work.
My code:
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());
}
}]);
3 answers
solution1
0 2016-07-08 13:43:24
its not like jquery where you select the value out of the 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
angular
.module('Demo', ['moment-picker'])
.controller('DemoCtrl', ['$scope', function ($scope) {
var ctrl = this;
$scope.onclick = function(){
console.log(ctrl.input);
}
}]);
solution2
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);
}
}]);
solution3
0 ACCPTED 2016-07-08 13:47:49
You're using controller-as syntax in your HTML but you haven't defined your controller as such. You're controller is still using the older $scope-as-controller syntax.
Also you had another
ng-modelpointing toctrl.inputon your submit button which could interfere with things so removed that.As another person stated you were trying to access something via
angular.element. That's not recommended for view controllers because you have access to the DOM bindings already via the controller properties.angular.elementshould be reserved for use in directives, and only in special cases.
I'd suggest going with controller-as like in your HTML and then fixing your controller like so:
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.