Javascript AngularJS ng repeat不重新呈现转发器（UI），也不再次调用ng init

我对ng init有点怀疑，实际上我有一些图表

顶部的趋势线

请看下面的图表

HTML表格如下

在页面加载时，我没有显示任何内容，但一旦我第一次单击特定按钮，就会显示http请求接收的数据的整个图表和表格。但之后，如果我单击另一个按钮并执行相同的http请求，那么它将更新趋势线和表，而不是图表。 我的piecharts是在下面的div中使用ng init呈现的，当我测试ng init=“myFunction（index）”方法时，它不会在随后的单击中更新

<form>
  <md-input-container>
    <label for="myInput">Search Division</label>
    <md-icon md-svg-icon="~/Content/myIcons/searchicon/ic_search_black_36px.svg"></md-icon>
    <input type="text" id="myInput" ng-model="searchDiv" md-autofocus>
  </md-input-container>
  <md-content ng-repeat="prod in listofProd | filter: searchDiv">
    <md-button class="md-whiteframe-1dp card" ng-click="generateChart(prod)" flex-sm="100" flex-gt-sm="100" flex-gt-md="100">
    {{prod}}
    </md-button>
  </md-content>
</form>

<div layout="row" layout-wrap>
  <div flex="25" style="width:1000px;height:300px; border: 1px solid skyblue;" ng-repeat="year in years track by $index" id="piechart{{$index}}" ng-init="myFunction($index)">
  </div>
</div>

由于

Angular 1.2

，它有一个选项

track by

，以防止中继器 从重新渲染所有项到提高性能

有关更多信息，请访问：

这就是为什么自从您在这里使用了

track by

以来，在相同的

years

呈现的

years中不再触发
ng init
的原因
ng repeat=“year in years track by$index”

即使删除此选项，
ng init
也不会第二次触发，因为
years
这里是一个数组，其中
Angular
非常出色，可以根据其值进行跟踪，尽管没有显式的
track by

因此，我们必须将
年份
从简单数组更改为
对象数组
，比如，
[{year:obj.SecuredYear}]
让Angular生成一个
$$hashKey
，当对象每次更改时，它是不相同的，Angular将通过触发
ng init
重新绘制中继器

那么与此相关的变化是,

Html

<div flex="25" style="width:1000px;height:300px; border: 1px solid skyblue;" 
  ng-repeat="year in years" id="piechart{{$index}}" ng-init="myFunction($index)">
</div>

JS（myFunction（））

我刚刚创建了一个示例代码段，如下所示，用
console.log（years[index].year）检查这一点生成图表时，
$scope.myFunction（）
内的code>，该函数使用
ng init
成功登录


angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
var json=[{SecuredYear:1965}，{SecuredYear:1988}，{SecuredYear:2016}，{SecuredYear:2012}]；
$scope.generateChart=函数（项）{
风险值年数=[]；
forEach（函数（obj）{
var exists=年。过滤器（功能（y）{
返回y.year==对象；
});
if（exists.length==0）{
年推送（{year:obj.SecuredYear}）；
}
});
$scope.years=年；
$scope.myFunction=函数（索引）{
var数据=[['Product'，'ValueInDhs']]；
forEach（函数（obj）{
如果（obj.SecuredYear==年[index].year）{
//data.push（[String（obj.GroupName.trim（），obj.ValueInDhs]）；
console.log（年[索引].year）；
}
});
//$scope.displayChart（数据、索引）；
};
};
}

生成图表

{{年.年}

angular.module（'app'[
“谷歌图表”
])
.controller（'appCtrl'，function（）{
让vm=这个；
vm.charts=[]；
vm.addChart=函数（）{
vm.charts.push({
键入：“PieChart”，
数据：{
“科尔斯”：[{
id:“t”，
标签：“浇头”，
类型：“字符串”
}, {
id:“s”，
标签：“切片”，
类型：“编号”
}],
“行”：[{
c:[{
五：“蘑菇”
}, {
v:3
}, ]
}, {
c:[{
v:vm.input.name
}, {
v:vm.input.quantity
}]
}, {
c:[{
五：“橄榄”
}, {
v:31
}]
}, {
c:[{
五：“西葫芦”
}, {
v:1
}, ]
}, {
c:[{
v：“意大利香肠”
}, {
v:2
}, ]
}]
}
});
};
返回虚拟机；
});



添加图表
如何绑定
ng repeat
数据
years
，一次还是每次？你能发布上面提到的
onclick
事件的代码吗？每次我想绑定这几年，并且这些年都是正确绑定的，我的意思是每当我点击按钮时，它就会调用http并在那里更新这些年，但在那之后，我的myFunction就没有运行了。我刚刚用year功能更新了上面的代码，只需将其更改为
$scope.years=angular.copy（years）。试试这个，我会很快更新答案并说明原因。好的。让我更改并检查。我只是更新了饼图数据，但它没有更改饼图数据。Aruna，它突然开始在draw chart函数的另一部分出错。错误为error:$rootScope:inprog。图表第一次被正确地呈现出来，但是当我再次点击按钮时，它就会给出上面的错误。@Saleem你能告诉我完整的错误吗？你也可以告诉我一个带有错误的角度url。我来看看，阿鲁娜，这是错误的链接。错误出现在$scope.displayChart=函数（dataForChart，index）{函数内。如果需要，您可以使用TeamViewer。好的，这是因为
$scope.displayChart
函数，
$scope.$apply（函数（）{chart.draw（数据，选项）；}中有这一行）；
。您可以删除
$scope.$apply（函数（）{}）
包装器，只需将此行更改为
chart.draw（数据、选项）
<div flex="25" style="width:1000px;height:300px; border: 1px solid skyblue;" 
  ng-repeat="year in years" id="piechart{{$index}}" ng-init="myFunction($index)">
</div>

    var years = [];
    json.forEach(function (obj) {
      var exists = years.filter(function(y) {
        return y.year === obj.SecuredYear;
      });

      if (exists.length === 0) { // This will replace the `indexOf` check
        years.push({year: obj.SecuredYear});  // change here
      }
    });
    $scope.years = years;

      $scope.myFunction = function (index) {
      var data = [['Product', 'ValueInDhs']];
      json.forEach(function (obj) {
        if (obj.SecuredYear == years[index].year) {   // change here at years[index].year
          data.push([String(obj.GroupName).trim(), obj.ValueInDhs]);
        }
      });
      $scope.displayChart(data, index);
    };