angularjs - как использовать HTML выбрать

Question

Привет У меня есть выберите вариант в HTML, показывая Apple, Google и 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>

Я могу показать данные Apple, как по умолчанию с 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();

Как использовать другие опции выбора (google и amazon), беру данные из json-файлов. Файлы json уже существуют. (например, goog.json, amzn.json) Должен ли я сделать другой контроллер в javascript? или любое другое решение?

Заранее спасибо.

Answer 1

Все, что вам действительно нужно сделать, это обернуть код запроса в функции. Это позволяет установить URL, основанный на $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(); 

Теперь в HTML добавить новую функцию в качестве обработчика изменений в ng-change

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

Answer 2

Вы можете использовать ng-change для прослушивания изменений в выборе.

И заставьте его вызвать функцию в вашем контроллере.

На основании ввода этой функции вы создаете новый график?

Это что-то вы пытаетесь построить