Question

我试图在我的角度图表中添加一个选择菜单，但我遇到了一些问题。我使用了this选择应用模板并尝试将其合并到我当前的应用中。但是，页面上显示的唯一内容是选择菜单和图表的轴。

我查看了控制台日志，查看可能出现的任何错误，发现其中一个src网址未找到，并更新了当前代码中的网址。然而，这并没有解决我的问题，并且在控制台中没有出现更多错误，让我对我做错了什么有所了解。这是我第二次使用选择指令，因此我很难发现代码中的任何错误。

我的标记：

    <!DOCTYPE html>
    <html ng-app="myApp">

    <head>
     <meta charset="utf-8" />
     <link rel="stylesheet" type="text/css" href="style.css">
     <title>Angular Chart</title>
     <script src="http://code.angularjs.org/1.2.2/angular.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
     <script type="text/javascript" src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <script src="script.js"></script>
    </head>

    <body ng-controller="MainCtrl">
      <select ng-model="selection" ng-options="item for item in items">
       </select>
      <hr/>
      <div ng-switch on="selection">
        <div ng-switch-when="Selection 1">
           <div 
              data-ac-chart="'line'" 
              data-ac-data="data[0]" 
              data-ac-config="config" 
              class="chart">
           </div>
        </div>
        <div ng-switch-when="Selection 2">
           <div 
              data-ac-chart="'line'" 
              data-ac-data="data[1]" 
              data-ac-config="config" 
              class="chart">
           </div>
        </div>
     </div>
   </body>

 </html>

我的JS：

    var myApp = angular.module('myApp', ['angularCharts']);
    myApp.controller("MainCtrl", ['$scope', function($scope) {
      $scope.config = {
        title: 'Products',
        tooltips: true,
        labels: false,
        mouseover: function() {},
        mouseout: function() {},
        click: function() {},
        legend: {
        display: true,
        position: 'right'
       }
      };
       $scope.data = [{
         series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
         data: [{
           x: "Laptops",
           y: [100, 500, 0]
          }, {
           x: "Desktops",
           y: [300, 100, 100]
          }, {
           x: "Mobiles",
           y: [351]
          }, {
           x: "Tablets",
           y: [54, 0, 879]
          }]},
          {
         series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
         data: [{
           x: "Laptops",
           y: [10, 500, 0]
          }, {
           x: "Desktops",
           y: [30, 200, 10]
          }, {
           x: "Mobiles",
           y: [357, 127, 20]
          }, {
           x: "Tablets",
           y: [54, 0, 879]
          }]
         }];
       $scope.items = ['Selection 1','Selection 2'];
       $scope.selection = $scope.items[0]
     }
   ]);

编辑：我现在看到问题出在数据模型中的js文件中。我最初认为是$scope.data中的数据数组是在div的html标记中调用的，所以我只是在该模型下创建了两个不同的数据数组dataA和dataB取代data。但是，数据模型中还需要系列数组，以使data-ac-data指令正常运行。

我对如何格式化模型中的代码感到困惑，以便在做出选择时轻松调用html中的数据。我还不确定我是否可以在html标记中使用"{{data.dataA}}"等表达式代替"data"。请让我知道修改代码的最简单方法。

Answer 1

此

ac-data="dataA" 
ac-data="dataB"

应该是

ac-data="data.dataA"
ac-data="data.dataB"

Answer 2

问题出在$scope.data模型上。它需要两组元素，每组元素都有一个series和data数组。该指令也分别修改为data-ac-data="data[0]"和"data[1]"。

AngularJS ng-select和ng-switch-when issue

2 个答案: