CODEWITHSUNDEEP
javascripthtmlangularjsselect
James
James

Reputation: 47

angularjs - how to use html select

Hi I have a select option in html showing Apple, Google and Amazon

<div class="col-md-9" id="line-chart" ng-controller="LineCtrl">
            <div class="panel panel-default" >
              <select ng-model="selec">
                <option value="aapl">AAPL(Apple)</option>
                <option value="goog">GOOG(Google)</option>
                <option value="amzn">AMZN(Amazon)</option>
              </select>
              <div class="panel-body">
                <canvas id="line" class="chart chart-line chart-xl" data="data" labels="labels"     legend="true"
                click="onClick()" series="series"></canvas>
              </div>
            </div> 
          </div>

I can show the Apple data as a default with Angualr JS

(function () {
  'use strict';

  var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);

  app.controller('LineCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('stock/aapl.json').success(function(data) {
        $scope.selec = 'aapl'; //default as age
        $scope.series = ['Tweet Mood', 'Stock Market'];
        $scope.stocks = data;
        $scope.data = [[], []];
        $scope.createGraphArray = function() {  
          for (var i = 0; i < $scope.stocks.length; i++) {
            $scope.data[0].push($scope.stocks[i].percentage1);
            $scope.data[1].push($scope.stocks[i].percentage2);
          }
        };
        $scope.createGraphArray();

How can I use other select options (google and amazon) taking the data from json files. json files are already exist. (eg . goog.json, amzn.json) Should I make another controller in javascript? or any other solution?

Thanks in advance.

Upvotes: 2

Views: 233

Answers (2)

charlietfl
charlietfl

Reputation: 171679

All you really need to do is wrap the request code in a function. This allows you to set the url based on $scope.selec

$scope.selec = 'aapl'; // keep this out of function

$scope.getChartData = function(){
    var url = 'stock/' + $scope.selec + '.json' ;

    $http.get(url).success(function(data) {
        // same code as before except as noted above
     });
}
// call function when controller intializes
$scope.getChartData();

Now in html add the new function as change handler in ng-change

<select ng-model="selec" ng-change="getChartData()">

Upvotes: 2

Bob Thomas
Bob Thomas

Reputation: 282

You can use an ng-change to listen on changes of the selection.

And make it call a function in your controller.

Based on the input of that function you generate a new graph ?

Is that something your trying to build

Upvotes: 1

Related Questions