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

Question

我有以下 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 文档中搜索了解决方案，但找不到任何解决方案。

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

Answer 1

如果您需要在 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 .