I'm new to AngularJS and currently struggling with the following problem.
As you can see here in my plnkr I can change the value of the $scope.myDate.value.
The problem now is, that I can't work with this scope in a function, when adding ng-change="barFunc()" to the <input>.
How is it possible to work with ng-change or ng-watch here?
It would be great if someone could make my plnkr work.
<!DOCTYPE html>
<html ng-app="demo">
<head>
<link href="//netdna.bootstrapcdn/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//rawgithub/g00fy-/angular-datepicker/1.0.3/dist/index.css" rel="stylesheet">
<style>
input {margin: 45px 0 15px 0;}
pre{padding: 15px; text-align: left;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div ng-controller="foo">
<input type="datetime" class="form-control" date-time ng-model="myDate.value"
ng-change="barFunc()" format="yyyy-MM-dd hh:mm:ss" placeholder="Select datetime">
<pre>myDate: {{myDate.value}}</pre>
<pre>myDate + " abc": {{ custom.value }}</pre>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//code.angularjs/1.4.8/angular.js"></script>
<script src="//rawgithub/g00fy-/angular-datepicker/1.0.3/dist/index.js"></script>
<script>
angular.module('demo', ['datePicker']).controller('foo',['$scope', function($scope){
$scope.myDate = {
value: ''
};
$scope.barFunc = function() {
$scope.custom.value = $scope.myDate.value + " abc";
};
}]);
</script>
</body>
</html>I'm new to AngularJS and currently struggling with the following problem.
As you can see here in my plnkr I can change the value of the $scope.myDate.value.
The problem now is, that I can't work with this scope in a function, when adding ng-change="barFunc()" to the <input>.
How is it possible to work with ng-change or ng-watch here?
It would be great if someone could make my plnkr work.
<!DOCTYPE html>
<html ng-app="demo">
<head>
<link href="//netdna.bootstrapcdn./bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//rawgithub./g00fy-/angular-datepicker/1.0.3/dist/index.css" rel="stylesheet">
<style>
input {margin: 45px 0 15px 0;}
pre{padding: 15px; text-align: left;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div ng-controller="foo">
<input type="datetime" class="form-control" date-time ng-model="myDate.value"
ng-change="barFunc()" format="yyyy-MM-dd hh:mm:ss" placeholder="Select datetime">
<pre>myDate: {{myDate.value}}</pre>
<pre>myDate + " abc": {{ custom.value }}</pre>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//code.angularjs/1.4.8/angular.js"></script>
<script src="//rawgithub./g00fy-/angular-datepicker/1.0.3/dist/index.js"></script>
<script>
angular.module('demo', ['datePicker']).controller('foo',['$scope', function($scope){
$scope.myDate = {
value: ''
};
$scope.barFunc = function() {
$scope.custom.value = $scope.myDate.value + " abc";
};
}]);
</script>
</body>
</html>3 Answers
Reset to default 2You have to define $scope.custom before you can access to $scope.custom.value
I would use $watch in this case:
in your controller:
$scope.custom = {
value : ''
};
$scope.$watch('myDate.value', function() {
$scope.barFunc();
});
$scope.barFunc = function() {
$scope.custom.value = $scope.myDate.value + " abc";
};
or in plunkr
You could set up a watcher like this:
$scope.$watch('myDate', function(oldValue, newValue) {
$scope.barFunc(newValue);
});
but you'll also need to define your custom object:
$scope.custom = {
value: ''
};
and it should work. I don't feel like this is the best solution - I generally feel like if I'm setting watchers because I don't understand why something's not working as expected then it's better to figure out why it's not working. I get that's what you're trying to do, and am only offering this as something that would solve your problem quickly if that's what you need.