Javascript AngularJS ng repeat不为属性中使用的表达式绑定下一个值

这是我的密码

<script>
    var app = angular.module('TestApp', []);
    app.controller('TestCtrl', function ($scope) {
        $scope.tests = [
            {
                id: '1',
                name: 'Test 1',
                count: '10',
                children: [{
                    name: 'Test Child 1'
                }]
            },
            {
                id: '2',
                name: 'Test 2',
                count: '19',
                children: [{
                    name: 'Test Child 2'
                }]
            },
            {
                id: '3',
                name: 'Test 3',
                count: '18',
                children: [{
                    name: 'Test Child 3'
                }]
            }
        ];
    });

    function test() {
        alert($('#testtest').attr('href'));
    }
</script>
<div ng-app="TestApp" ng-controller="TestCtrl">
    <div class="panel panel-default">
        <div class="panel-heading clearfix" ng-repeat="test in tests">
            <a id="testtest" data-toggle="collapse" href="#div_{{test.id}}" onclick="test();" class="pull-left" style="padding-top: 7.5px;">{{test.id + ' ' + test.name}} <span class="badge">{{test.count}}</span></a>
        </div>
        <div id="div_{{test.id}}" class="panel-collapse collapse">
            <div class="panel-body">
                <table id="tbl_{{test.id}}" class="table table-hover">
                    <thead>
                        <tr>
                            <td>Name</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="child in test.children">
                            <td>{{child.name}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

var app=angular.module（'TestApp'，[]）；
app.controller（'TestCtrl'，函数（$scope）{
$scope.tests=[
{
id:'1'，
名称：“测试1”，
计数：“10”，
儿童：[{
名称：“测试子项1”
}]
},
{
id:'2'，
名称：“测试2”，
计数：‘19’，
儿童：[{
名称：“测试子2”
}]
},
{
id:'3'，
名称：“测试3”，
计数：‘18’，
儿童：[{
姓名：“测试子3”
}]
}
];
});
功能测试（）{
警报（$（'#testtest'）.attr（'href'））；
}
名称
{{child.name}

我正在尝试创建一个面板列表，其中包含表格

结果是：

当我单击面板的名称时，它应该展开面板主体，但面板主体没有展开。因此，我提醒（

href=“#div_{{{test.id}}”）它为所有三项显示了#div_1

假设它是#div_1、#div_2和#div_3，就像在面板标题上生成的1、2和3号一样

我犯了什么错

p/s：很抱歉解释得不好
您正在重复标题，您也需要对面板进行此操作，请尝试此操作并让我知道：

<div ng-app="TestApp" ng-controller="TestCtrl">
    <div class="panel panel-default">
        <div class="panel-heading clearfix" ng-repeat="test in tests">
            <a id="testtest" data-toggle="collapse" href="#div_{{test.id}}" onclick="test();" class="pull-left" style="padding-top: 7.5px;">{{test.id + ' ' + test.name}} <span class="badge">{{test.count}}</span></a>
        </div>
        <div id="div_{{test.id}}" class="panel-collapse collapse"  ng-repeat="test in tests">
            <div class="panel-body">
                <table id="tbl_{{test.id}}" class="table table-hover">
                    <thead>
                        <tr>
                            <td>Name</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="child in test.children">
                            <td>{{child.name}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


名称
{{child.name}
我看到了一些给您带来麻烦的事情：
您希望使用
ng href
，因此警报中会出现错误。您还应该使用
ng单击
而不是
onclick

 <a id="testtest" data-toggle="collapse" ng-href="#div_{{test.id}}"     
     ng-click="test();" class="pull-left" style="padding-top: 7.5px;">
            {{test.id + ' ' + test.name}} 
     <span class="badge">{{test.count}}</span></a>


关于角度的经验法则：
每当您想使用范围中的内容更新
元素
或
元素属性
时，请查看angular是否有管理该元素的指令。AngularJS编译DOM您不应该在没有指令的情况下访问或操作元素，在本例中，
ng href
，
ng click
和
ng attr id
，Malkus和Fedaykin都指出了使用AngularJS进行开发的重要概念。我的答案只是这两个方面的总结。我在这里做了一个决定

我所做的更改：

<a id="testtest" data-toggle="collapse" ng-href="#div_{{test.id}}"
       class="pull-left" style="padding-top: 7.5px;" ng-click="selectTest(test)">
   {{test.id + ' ' + test.name}}<span class="badge">{{test.count}}</span>
</a>

这种方法允许您拥有整个对象并对其进行修改

我做的另一个改变是：

<div class="panel-collapse collapse" ng-attr-id="div_{{test.id}}" 
     ng-repeat="test in tests">
     ...
</div>


...

如Fedaykin所述，您只需
ng重复
面板标题，这意味着
test
的范围仅在标题中。您无法在标题外访问
测试
，因为它超出范围。因此，您必须在面板主体上再次执行
ng repeat

我不喜欢这种方法，因为它让你无法控制要显示的内容。当您遇到巨大的数据时，您不希望将所有数据呈现到前端，因为这将导致延迟等。因此，最好的方法是在用户单击相应的面板时显示选定的数据

暗示
尝试使用
ng单击
ng show
，
ng hide
，
ng if
来执行此操作

$scope.selectTest = function(test) {
    console.log(test);
    $scope.selectedTest = test;
}

<div class="panel-collapse collapse" ng-attr-id="div_{{test.id}}" 
     ng-repeat="test in tests">
     ...
</div>