Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS Hebrew Date Converter

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!

like image 735
Ian Taylor Avatar asked Dec 06 '25 03:12

Ian Taylor


1 Answers

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;'
like image 82
HankScorpio Avatar answered Dec 08 '25 17:12

HankScorpio