带有 <select> <option> 的 AngularJs 更新功能不起作用答案

【问题标题】：AngularJs update function with <select> <option> is not working带有 <select> <option> 的 AngularJs 更新功能不起作用
【发布时间】：2016-10-03 14:31:34
【问题描述】：

我在使用 AngularJS 时遇到了困难。我试图将我的一些纯 html 工作转换为 angularjs。我的更新功能不适用于 AngularjS

这个带有纯 html 的工作代码：每当我从下拉列表中进行选择时，它都会更新得很好。

 <div id="year" class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="selection" data-selection="Year">Select Year</span><span class="caret"></span>
  </button>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">

        <li class="dropdown-submenu year">
          <a tabindex="-1" href="#" >2011</a>
        </li>
        <li class="dropdown-submenu year">
          <a tabindex="-1" href="#" >2012</a>
        </li>

d3.selectAll('.dropdown-submenu.year > a').on("click", function(d) {
year = this.text;
chartsUpdate();

});

这里尝试使用 AngularJS 实现相同的目标：

    Year:
<select  class="YearSelector">
    <option  ng-repeat="year in chart_data |  unique: 'FiscalYear' | orderBy:'FiscalYear'" >
        {{ year.FiscalYear }}</option>
</select>

d3.selectAll('.YearSelectors').on("click", function (d) {
        FiscalYear = this.text;
        chartsUpdate();
    });

更新，这里是我的 chartsUpdate() 函数：

function chartsUpdate() {
        myChart.data = getData(data, FiscalYear, Quarter);
        myChart.draw(500);
    }

我尝试了多种方法，但都没有奏效，我觉得我在做一些非常基本的错误。我还是 html 和 angularjs 的新手。提前感谢您的任何帮助或建议

【问题讨论】：

你应该在你选择调用chartsUpdate时使用ng-change...你也应该考虑ngoptions而不是ng-repeat。

标签： javascript html angularjs d3.js

【解决方案1】：

我需要查看您的控制器，但理论上我会建议。

<select  class="YearSelector" ng-change="chartsUpdate()">
    <option  ng-repeat="year in chart_data |  unique: 'FiscalYear' | orderBy:'FiscalYear'" >
        {{ year.FiscalYear }}</option>
</select>

但是当你学习 Angular 时，你应该在你的选择中使用 ng-options。

【讨论】：

我没有 chartsUpdate() 纯 JavaScript 的控制器。我已经用我的功能编辑了我的问题。 ng-change 目前不起作用。
好的..我可以看看你的控制器吗，你只是一个用于图表的第三方库吗？
这是我的代码的一部分，希望对您有所帮助。我正在使用 d3.js 和 dimple.js 制作图表。 paste.ubuntu.com/23270529 并感谢您尝试帮助我！
我不确定 mychart 在哪里，或者它是如何工作的，但是您的 chartUpdate 在控制器中。如果你让它可以访问范围会发生什么？类似于 $scope.chartsUpdate = function chartsUpdate() { myChart.data = getData(data, FiscalYear, Quarter); myChart.draw(500); }
我认为我们需要隔离我们的问题。最初这是关于使用 select 更新函数，但它已将其变形为其他内容。让我们把它分解成三个问题。第一个问题（也是原问题）应该是如何用 ngselect 调用函数。你能用那个孤立的代码开始一个 plunkr（我会引导你完成它）吗？没有第三部分库，我们必须控制器。之后，我们就可以进入第 3 方了。

【解决方案2】：

使用 ng-change 和 ng-options

<select class="YearSelector"
        ng-change="chartsUpdate()"
        ng-options="year.FiscalYear for year in chart_data |  unique: 'FiscalYear' | orderBy:'FiscalYear'">
</select>

【讨论】：

添加 ng-change="chartsUpdate()" 无效。我用我的功能编辑我的问题。另外，我之前没有尝试过 ng-options 。我复制并粘贴你的，它没有再次工作。可能是因为方式是我的数据，不太确定