ngRepeat中的AngularJS绑定问题(折叠和展开Caret)

AngularJS binding issue in ngRepeat (Collapse and Expand Caret)

本文关键字:Caret 折叠 中的 AngularJS 绑定 问题 ngRepeat      更新时间:2023-09-26

我正在尝试在ngRepeat中实现折叠和展开面板。我试过这个:

<tbody ng-repeat="item in Items">
    <tr data-toggle="collapse" class="accordion-toggle">
        <td>{{item.name}}</td>
        <td>
        <a class="dropdown-toggle" ng-click="isCollapsed = !isCollapsed;getDetails(item.id);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
        </td></tr>
    <tr>
        <td class="hiddenRow">
            <div class="accordian-body collapse" collapse="isCollapsed">
            <table class="table display" style="border-collapse:collapse;">
                <thead><tr>
                <th>Student Name</th><th>Roll Number</th></tr></thead>
                <tbody>
                <tr>
                    <td>{{studentRecord.patientName}}</td><td>{{studentRecord.rollNumber}}</td>
                </tr></tbody></table>
            </div>
        </td>
    </tr>  
</tbody>

脚本:

$scope.getDetails = function (sId)
    {
    var studentDetails = DetailService.getDetail("studentsDetails", sId);
    studentDetails.then(function(data) {
                $scope.studentRecord = data;
         });    
    }

当我点击ngRepeat中的单个插入符号按钮时,它工作得很好。但是,当我点击多个项目时,中继器会为每个项目创建一个范围。因此,ngRepeat中的所有记录都获得相同的范围值。如何解决。

U应该在类似的项中生成属性

item.studentRecord 

然后使用

getDetails(item)

$scope.getDetails = function (item)
    {
    var studentDetails = DetailService.getDetail("studentsDetails", item.id);
    studentDetails.then(function(data) {
                item.studentRecord = data;
         });    
    }
<td>{{item.studentRecord.patientName}}</td>
<td>{{item.studentRecord.rollNumber}}</td>