angularjs-如何使用html select

Question

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.

Answer 1

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

Answer 2

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