gpt4 book ai didi

javascript - 加载 ng-repeat 后查找表的特定元素

转载 作者:行者123 更新时间:2023-12-03 08:19:53 25 4
gpt4 key购买 nike

我有以下 html 代码:

<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading" style="height: 56px;"><strong style="font-size: 20px;"><i class="fa fa-bar-chart"></i>Plan For {{entityYear}}</strong>
<div class="input-group year date col-md-3" style="float: right;">
<input type="text" class="form-control" ng-model="entityYear" ng-change="getPlansDataByYear(entityYear)">
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<table id="myTable" class="table table-striped">
<tr>
<th class="col-md-1">Name</th>
<th class="col-md-2">Description</th>
<th class="col-md-2">Start Date</th>
<th class="col-md-2">End Date</th>
<th class="col-md-2">Date Added</th>
<th class="col-md-4">Chart</th>
</tr>
<tr id="planRows" ng-repeat="plan in plansOfTheYear">
<td>
{{plan.name}}
</td>
<td>
{{plan.description}}
</td>
<td>
{{plan.startDate | date: 'dd MMMM yyyy'}}
</td>
<td>
{{plan.endDate | date: 'dd MMMM yyyy'}}
</td>
<td>
{{plan.dateAdded | date: 'dd MMMM yyyy'}}
</td>
<td>
<div id="doughnutChart{{$index}}" class="panel-body"></div>
</td>
</tr>
</table>
</div>
</div>
</div>

Controller 代码如下:

$scope.getPlansDataByYear = function(year){
PlansService.getPlansDataByYear(year).success(function(data){
$scope.plansOfTheYear = data;
_.each(data, function(planData, index){
$('#doughnutChart' + index).append('<div>Chart here</div>')
});
})
}

我想要的是找到 donutChart div 并附加 <div>Chart here</div> 。问题是因为我使用ajax调用,它将运行ng-repeat还有 jQuery 行,因此它无法找到例如第一个 div doughnutChart0因为当我尝试使用 jQuery 行查找它时它不存在。

所以我的问题是如何首先加载 ng-repeat数据,然后搜索我想要附加数据的特定 div?非常感谢所有帮助。

我已经从 stackoverflow 和 angularjs 文档中搜索了解决方案,但找不到任何解决方案。

当我运行代码时,它没有找到该名称的任何元素。但是我可以找到第一行,因为它已经存在。

最佳答案

如果您需要在 ng-repeat 完成后调用 jQuery 代码,只需利用 JavaScript 的单线程事件循环并在超时后运行您的 jQuery 代码:

$scope.getPlansDataByYear = function(year){
PlansService.getPlansDataByYear(year).success(function(data){
$scope.plansOfTheYear = data;
//you can use window.setTimeout instead of $timeout since angular doesn't need to be aware of the code run by jQuery
window.setTimeout(function() {
_.each(data, function(planData, index){
$('#doughnutChart' + index).append('<div>Chart here</div>');
});
}, 1);

});
};

或者,如果您想以“Angular 方式”执行此操作,我建议您在 View 中更改此设置:

<td>
<div class="panel-body" ng-bind-html="plan.chart"></div>
</td>

在你的 Controller 中:

$scope.getPlansDataByYear = function(year){
PlansService.getPlansDataByYear(year).success(function(data){
$scope.plansOfTheYear = data;
$scope.plansOfTheYear.forEach(function(plan) {
plan.chart = '<div>Chart here</div>';
});
});
};

请注意,要使其正常工作,您需要包含 ngSanitize .

关于javascript - 加载 ng-repeat 后查找表的特定元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33787328/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com