AngularJS的ng-select和ng-switch-when问题

AngularJS ng-select and ng-switch-when issue

本文关键字：ng-switch-when 问题 ng-select AngularJS      更新时间：2023-09-26

我试图添加一个选择菜单到我的角度图表，我遇到了一些问题。我使用了这个选择应用程序模板，并试图将其合并到我当前的应用程序中。然而，页面上显示的唯一东西是选择菜单和图形的轴。

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

我的标记:

    <!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文件。我最初认为这是在div的html标签中调用的$scope.data中的数据数组，所以我简单地在该模型下创建了两个不同的数据数组，作为dataA和dataB代替data。然而，序列数组也是数据模型中data-ac-data指令正常工作所必需的。

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

This

ac-data="dataA" 
ac-data="dataB"
应该

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

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

相关文章：