Refresh div with Javascript or AngularJS - for IONIC

Question

Refresh div with Javascript or AngularJS - for IONIC

Navigation

#1 by (3 votes)

0

Hello,

I have the following problem, I have a select with an onchange method that I would like to update a div . The reason for this is because I have a 3 graphics done in angular-chart.js and (supposedly) when values that the chart variable should change, it should update (supposedly), but it does not update.

As I am using this for IONIC I do not know if Ajax works, and I do not understand jQuery, if it is possible to use it for this, I will accept your questions.

My HTML:

<select ng-controller="chartController" ng-options="city.name for city in selectedState.cities"
        ng-model="selectedCity" ng-change="updateGrafico()">
    <option value="">Selecionar</option>
</select>
//div com um gráfico para exemplo
<div id="charts" class="item item-divider" ng-controller="chartController">
    Indices de Excesso e Deficiência:
    <div class="item item-text-warp" >
      <canvas id="base" class="chart-bar" chart-data="dataDefExce"
      chart-labels="labels" chart-colors="colors"
      chart-dataset-override="datasetOverrideDuplo">
      </canvas>
    </div>
</div>

My controller:

.controller('chartController', function($http, $scope) {
  $scope.colors = ['#000000', '#FF0000', '#00FFFF'];
  $scope.labels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
  $scope.selectedCity = {id:'1'};
  var ret;


  $scope.updateGrafico = function(){
    var idCidade = $scope.selectedCity.id;
    console.log(idCidade);
    $http
    .get(myrepository)
    .success(function(response) {
      $scope.cityOBJ = response;
      popularGrafico();
    });
  }

  function popularGrafico() {
    this.ret = $scope.cityOBJ[0];
    $scope.dataEvapo = [this.ret.info.etppri];
    $scope.dataDefExce = [this.ret.info.bh.ex, this.ret.info.bh.def];
    $scope.dataPrecip = [this.ret.info.bh.pr];
    console.log(this.ret);
  }
  $scope.datasetOverrideDuplo = [{
    label: "Bar chart",
    borderWidth: 1,
    type: 'bar'
  }, {
    label: "Line chart",
    borderWidth: 3,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    type: 'line'
  }];

  $scope.datasetOverrideGraficoUnico = [{
    yAxisID: 'y-axis-1'
  }, {
    yAxisID: 'y-axis-2'
  }];
  $scope.options = {
    scales: {
      yAxes: [{
        id: 'y-axis-1',
        type: 'linear',
        display: true,
        position: 'left'
      }]
    }
  };
})

javascript angularjs ionic chartjs angular-chart

asked by anonymous 28.10.2016 / 13:31

1 answer

Select with several Procedures How do I disable a function when android android API

score 3 · Accepted Answer

Come on,

First you are actually instantiating two separate controllers from your chartController, see:

<select ng-controller="chartController" ...">
<div id="charts" ng-controller="chartController">...

You need to understand that a controller controls only the elements that are within its context, that is, it only controls what is inside the element that you put the ng-controller .

This strange you use ng-controller with Ionic, since it already comes "native" with ui-router and with it you define the controller for the view of the route in an "explicit" way, through the configuration of the route. p>

To work this way using ng-controller , you must include all elements of the context of that controller within it, try the following:

<section ng-controller="chartController">
    <select ...>
    <div id="charts" ...>
</section>

Now just a tip on the angular charts, watch out!

I have already used it on some projects and have had problems with updating it, since it keeps the old canvas, from the last generated values, underneath the new one, and eventually if you make an event of over or click on the space that previously had a bar, it will "blink" the old graphic on the new. I solved this by doing an abstraction over the angular charts, it was horrible to do that, but it was only a matter of time. I suggest you study using the lib that the angular-charts works at chart.js .

One lib that I think is worth a study is also the Chartist.js .

And for your average "basic" doubt, I think you should give a review on both Angular and Ionic.