更新

Question

我在加载页面时显示带有默认值的图表。我想添加angularjs可点击链接来更改图表上显示的期间（月，周，日）。

我目前正在使用<a href="{{ URL::to('t') }}?c={{ $currency }}&p=1m">1m</a>进行常规页面重新加载，但是如何更改url parm并刷新图表而不必重新加载页面？

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..");
  });

}]);

Answer 1

您似乎只是将url传递给get请求方法。换句话说，url不用于重新加载页面。如果是这样，最好使用function

＆＃13;

$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")

＆＃13;

默认情况下，当您转到与此controller相关的路由时，将调用getData函数。您必须传递与默认显示的图表相关的参数。

使用按钮并在这三个按钮中调用该功能，而不是anchor标签。

＆＃13;

<button type="button" ng-click="getData('argument')">1m</button>
<button type="button" ng-click="getData('argument')">1w</button>
<button type="button" ng-click="getData('argument')">1d</button>

＆＃13;

更新

在http.get请求之前为函数内部的url定义一个新变量，并将动态参数与它连接起来。在这种情况下，如果param1和param2是静态的，那么无论您在哪里使用该函数，都应该使用这两个参数调用该函数。

＆＃13;

$scope.getData = function(param1, param2) {
  var url = "www.domain.com/api/gettickers?parm1=" + param1 + "&parm2=" + param2
  $http.get(url).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(1, 2)

＆＃13;

Angularjs更改url parm并刷新onClick

1 个答案:

更新