嵌套的ng-repeat与不同的数据

时间:2016-04-12 10:55:59

标签: angularjs angularjs-scope

我在我的网络应用程序中使用AngularJS v1.5.0。我有使用ng-repeat显示的用户反馈。现在每当主管点击反馈时,我都会拨打服务器电话并获取用户的历史记录并在面板上显示。

调用成功后,我将数据分配给feebackDetails变量,该变量现在是控制器范围变量。但我不希望它具有控制器范围,因为每个反馈将具有不同的用户和不同的数据。

<div class="tab-pane fade in" ng-controller="controller-feedback" id="feedback">
    <div class="col-md-12">
        <div class="row">
            <div ng-repeat="feedback in feedbacks track by $index" ng-click="getUserHistory(feedback.userId)" data-toggle="collapse" data-target="#feedback{{$index}}" aria-expanded="false" aria-controls="#feedback{{$index}}">
                <div class="alert alert-info">
                    <div>{{feedback.feedback}}</div>
                    <div class="collapse" id="feedback{{$index}}">
                        <div class="well">
                            <div ng-repeat="feedbackDetail in feedbackDetails track by $index">
                                <span style="font-weight: bold">Question:</span> {{feedbackDetail.question}} <br>
                                <span style="font-weight: bold">Answer:</span> {{feedbackDetail.answer}} <br>
                                <span style="font-weight: bold">Helpful:</span> {{feedbackDetail.helpful}} <br>
                                <span style="font-weight: bold">Feedback:</span> {{feedbackDetail.feedback}} <br>
                                <span style="font-weight: bold">Executive:</span> {{feedbackDetail.executive}} <br>
                                <hr ng-hide="$last">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的控制器部分。

app.controller('controller-feedback', function ($scope, $http, $rootScope) {
    $scope.feedbacks = [];
    $scope.feedbackDetails = [];

    // This will get the feedbacks
    $http
        .get(phpUrl + 'test-feedback', {params:{doctorId:doctorId}})
        .then(function success(response) {
            $scope.feedbacks = response.data.data;
            $rootScope.feedbackCount = response.data.data.length.toString();
        }, function error(success) {

        });

    $scope.getUserHistory = function(userId) {
        console.log(userId);

        $http
            .get(phpUrl + 'test-feedback-details', {params:{userId:userId}})
            .then(function success(response) {

                /**
                 * This variable $scope.feedbackDetails must be different for each ng-repeat
                 */
                $scope.feedbackDetails = response.data;
            }, function error(success) {

            });
    };
});

Current output

2 个答案:

答案 0 :(得分:0)

您可以创建一个名为feedbackDetail的指令,放在使用隔离范围的ng-repeat内,然后从feedbackDetail传入ng-repeat。 然后,当您从指令控制器发出HTTP请求并将其分配给$scope时,它将只是重复部分的范围。

答案 1 :(得分:0)

getUserHistory更改为接受feedback对象。

$scope.getUserHistory = function(feedback) {
var userId = feedback. userId ....

而不是

$scope.feedbackDetails = response.data;

指定

$scope.feedback.feedbackDetails = response.data;

内部重复应该使用feedback.feedbackDetails。