angularjs - 如何使用 html 选择答案

【问题标题】：angularjs - how to use html selectangularjs - 如何使用 html 选择
【发布时间】：2015-07-05 06:40:28
【问题描述】：

您好，我在 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>

我可以使用 Angualr JS 将 Apple 数据显示为默认值

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

如何使用其他选择选项（谷歌和亚马逊）从 json 文件中获取数据。 json 文件已经存在。（例如 .goog.json、amzn.json）我应该在 javascript 中创建另一个控制器吗？或任何其他解决方案？

提前致谢。

【问题讨论】：

标签： javascript html angularjs select

【解决方案1】：

您真正需要做的就是将请求代码包装在一个函数中。这允许您根据$scope.selec设置url

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

【讨论】：

【解决方案2】：

您可以使用 ng-change 来监听选择的变化。

并让它在你的控制器中调用一个函数。

根据该函数的输入，您生成一个新图？

这是你试图构建的东西

【讨论】：