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

时间:2015-12-02 14:15:47

标签: javascript angularjs twitter-bootstrap

我正在尝试在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中的所有记录都获得相同的范围值。如何解决它。

1 个答案:

答案 0 :(得分:0)

U应该在项目中设置属性,如

item.studentRecord 

然后使用

  

getDetails(项目)

$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>