CODEWITHSUNDEEP
javascriptangularjsionic-framework
Isaac Li
Isaac Li

Reputation: 155

How to call javascript function from html?

I have following code:

<ion-content>
    <ion-list>
      <ion-item ng-repeat="x in names|orderBy:'order_id'">
        {{ x.order_id + ', ' + x.table_id+', '+x.name+', '+x.phone+', '+x.address+', '+x.remark+', '+myFunction(x.ctime)}}
      </ion-item>
    </ion-list>
  </ion-content>

I want to call myFunction and get the returned value, but it doesn't work.

<script type="text/javascript">
function myFunction(ctime) {
    alert("Hello World!");

    // create a new javascript Date object based on the timestamp
    // multiplied by 1000 so that the argument is in milliseconds, not seconds
    var date = new Date(ctime*1000);
    // hours part from the timestamp
    var hours = date.getHours();
    // minutes part from the timestamp
    var minutes = "0" + date.getMinutes();
    // seconds part from the timestamp
    var seconds = "0" + date.getSeconds();

    // will display time in 10:30:23 format
    var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
    console.log("debug",formattedTime);
    return formattedTime;
}

</script>

I wonder to know where the problem is. thanks.

Upvotes: 1

Views: 4590

Answers (1)

Kamran Ahmed
Kamran Ahmed

Reputation: 7761

The sequence of your script being attached in your page and your expression being evaluated might be the problem.

Anyways, making a global JavaScript function directly in the html file is not really recommended. You are using AngularJS, you can make the function available in the relevant scope, which will automatically handle this for you.

You must be having some controller where you declared your object array names, which must be looking something like:

myApp.controller('NamesCtrl', ['$scope', function($scope) {
  $scope.names = [{order_id: 1, table_id: 4, name: "Someone"}];
}]);

Just add your myFunction to the scope of the controller like:

myApp.controller('NamesCtrl', ['$scope', function($scope) {
  $scope.names = [{order_id: 1, table_id: 4, name: "Someone"}];

  $scope.myFunction = function myFunction(ctime) {
    alert("Hello World!");

    // create a new javascript Date object based on the timestamp
    // multiplied by 1000 so that the argument is in milliseconds, not seconds
    var date = new Date(ctime*1000);
    // hours part from the timestamp
    var hours = date.getHours();
    // minutes part from the timestamp
    var minutes = "0" + date.getMinutes();
    // seconds part from the timestamp
    var seconds = "0" + date.getSeconds();

    // will display time in 10:30:23 format
    var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
    console.log("debug",formattedTime);
    return formattedTime;
  };
}]);

The expression through which you are calling the function needs no change.

If you want more details about this concept you may have a look here.

If you still choose to keep your script in the html page, you may try to include that script before the expression and check if it solves the issue.

If you still have any issues, feel free to comment.

Upvotes: 2

Related Questions