I'm making a simple Hebrew Date Converter with AngularJS using the Hebcal Hebrew Date API.
HTML as follows:
<body ng-app="HebrewDate">
<div class="page-container" ng-controller="DateCtrl">
<input type="text" ng-model="inputYear" placeholder="Year (YYYY)"/>
<input type="text" ng-model="inputMonth" placeholder="Month (MM)"/>
<input type="text" ng-model="inputDay" placeholder="Day (DD)"/>
<button class="bt bt-achieve" ng-click="url(inputYear, inputMonth, inputDay)">Convert</button>
</div>
</body>
And the script:
var app = angular.module('HebrewDate', []);
app.controller('DateCtrl', function($scope, $http) {
$scope.url = function(inputYear, inputMonth, inputDay, outputYear) {
var dateUrl = "http://www.hebcal.com/converter/?cfg=json&gy=" + inputYear + "&gm=" + inputMonth + "&gd=" + inputDay + "&g2h=1";
var output;
$http({
method: 'GET',
url: dateUrl
}).success(function(data, status){
output = angular.fromJson(data);
outputYear = output.hy;
}).error(function(data, status){
// in case of error, sob.
});
}
});
For the life of me, I can't figure out how to get converted date (e.g. outputYear) to return the the HTML -- trying to get it to display just below the input fields. I've tried using a div with ng-bind, but I'm obviously missing something. New to AngularJS and would really appreciate some help. Thanks!
1) Add this to your html:
{{outputYear}}
2) remove outputYear as an argument for your controller function
3) change
'outputYear = output.hy;'
to
'$scope.outputYear = output.hy;'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With