Angularjs change url parm and refresh onClick Ask Question

I’m displaying a chart with default values when the page is loaded. I’d like to add angularjs clickable links to change the period (month, week, day) displayed on the chart.

I’m currently doing a regular page reload with <a href="{{ URL::to('t') }}?c={{ $currency }}&p=1m">1m</a> but how would it be possible to change the url parm and refreshing the chart without having to reload the page?

html

<div ng-app="app">
<div ng-controller="tickerchartsCtrl">
    <canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-options="options"></canvas>

     <a href="{{ URL::to('t') }}?c={{ $currency }}&p=1m">1m</a> --> Change to angularJs onClick instead of page reload
     <a href="{{ URL::to('t') }}?c={{ $currency }}&p=1w">1w</a> --> Change to angularJs onClick instead of page reload
     <a href="{{ URL::to('t') }}?c={{ $currency }}&p=1d">1d</a> --> Change to angularJs onClick instead of page reload

     <input type="hidden" ng-model="currency" name="period" value="{{ $currency }}">
     <input type="hidden" ng-model="period" name="period" value="{{ $period }}">

</div>
</div>

js

var app = angular.module('tickercharts',['chart.js']);
app.controller('tickerchartsCtrl', ['$scope', '$http', '$location', function($scope, $http, $location){

    $scope.currency      = angular.element(document.getElementsByName('currency')).val();
    $scope.period        = angular.element(document.getElementsByName('period')).val();

    var urlapigettickers = $location.protocol() + "://" + $location.host() + "/api/gettickers?c=" + $scope.currency + "&p=" + $scope.period ;        

    $http.get(urlapigettickers).success(function(data, status, headers, config) {
        $scope.gettickeritems = data.gettickers;

     //console.log(data);
    }).error(function(data, status, headers, config) {
        console.log("No data found..");
  });

}]);

One thought on “Angularjs change url parm and refresh onClick Ask Question”

  1. It seems that you just pass the url to the get request method. In other words, the url is not used for reloading the page. If so, it is better that you use a function

    $scope.getData = function(param) {
      $http.get(param).success(function(data, status, headers, config) {
        $scope.gettickeritems = data.gettickers;
    
        //console.log(data);
      }).error(function(data, status, headers, config) {
        console.log("No data found..");
      });
    }
    
    // Call the function with the default argument inside the controller.
    $scope.getData("defaultArgument")

Leave a Reply

Your email address will not be published. Required fields are marked *