配列のid属性をangularjs、HTMLで動的に設定する方法は？

Question

私は、私のng-repeat内で私の配列（詳細）を取得しようとしているので、child divの異なるビューを持つ異なるデータにバインドすることができます。私に例を挙げてみましょう。

<div class="row"> 
    <div class="panel-heading bgOrg col-xs-12 col-sm-12 col-md-12 col-lg-12 header-container "> 
    <div class="col-sm-1 col-xs-12 pull-left "></div> 
    <div class="col-sm-1 col-xs-12 header-cell">Request# </div> 
    <div class="col-sm-1 col-xs-12 header-cell ">Id</div> 
    </div> 

    <div ng-repeat="data in friends"> 
    <div class="row panel panel-body "> 
     <div class="col-xs-1"> 
     <div class="handpointer glyphicon glyphicon-plus" 
      data-ng-click="collapse($event, data.id)" 
      data-target="#view_{{data.id}}" 
      data-toggle="collapse" aria-expanded="false"> 
     </div> 
     </div> 
     <div class="col-sm-1 col-xs-12" data-ng-bind="data.requestId"></div> 
     <div class="col-sm-1 col-xs-12" data-ng-bind="data.id"></div> 
    </div> 

    <div class="collapse" id="view_{{data.id}}"> 
     <div class="col-sm-offset-1"> 
     <table class="table-condensed responsive-table"> 
      <tr class="row"> 
      <th><input class='header-checkbox' type='checkbox' /> </th> 
      <th>Id</th> 
      <th>Instance</th> 
      </tr> 
      <tr class="row" ng-repeat=" item in details[{{data.id}}]"> 
      <td><input class='header-checkbox' type='checkbox' /></td> 
      <td data-ng-bind="item.id"></td> 
      <td data-ng-bind="item.name"></td> 
      </tr> 
     </table> 
     </div> 
    </div> 
    </div> 
</div> 

私の問題は、私は私の親のdivをクリックしたとき、私はそれがこの概念にダイナミックなIDを設定することが可能であり、新しいデータで子のdivをマップしたいのですか？

のJs：

$scope.details = []; 
$scope.collapse = function (event, requestId) { 
    var deferred = $q.defer(); 
     var idx = 0; 
       service.getDetail(requestId) 
       .then(function (response) { 
        $scope.details[requestId] = response; 
        deferred.resolve(); 
       }, function (error) { 
        console.log(error); 
        deferred.reject(); 
       }); 
     return deferred.promise; 
     } 
}; 

Answer 1

外に立っていることの一つは、あなたがここに補間したくないということです。

<tr class="row" ng-repeat=" item in details[{{data.id}}]"> 

<tr class="row" ng-repeat="item in details[data.id]"> 

にここで私はあなたが取得しようとしていると思う場所の初歩的な例です。本当に

JS

// You have a list of things. Probably via $http.get. 
    $scope.listOfThings = [ 
     { id: 0, name: 'thing0' }, 
     { id: 1, name: 'thing1' }, 
     { id: 2, name: 'thing2' } 
    ] 

    $scope.loadedDetails = {}; 

    // Somehow you load the details into your hash, with a specific key. 
    $scope.getDetails = function(id) { 
     $scope.loadedDetails[id] = theDetails[id]; 

     // If you want to just keep track of the last thing that was clicked, 
     // Just store the id... 
     $scope.active = id; 
    } 

    // These would come from the backend normally. 
    var theDetails = {}; 
    theDetails[0] = [ { detail: 'thing 0 dtl 1' }, 
        { detail: 'thing 0 dtl 2' } ]; 

    theDetails[1] = [ { detail: 'thing 1 dtl 1' }, 
        { detail: 'thing 1 dtl 2' } ]; 

    theDetails[2] = [ { detail: 'thing 2 dtl 1' }, 
        { detail: 'thing 2 dtl 2' } ]; 

HTML

<div ng-controller='ctrl'> 

    <!-- Iterate over your things, and display details if you click on a thing --> 
    <ul> 
    <li ng-repeat="thing in listOfThings" ng-click="getDetails(thing.id)">{{ thing.name }} 
     <ul> 
     <li ng-repeat="dtl in loadedDetails[thing.id]"> 
      A Detail: {{ dtl.detail }} 
     </li> 
     </ul> 
    </li> 
    </ul> 

    <hr> 
    <h2>Last Clicked</h2> 
    <!-- If you just want to show the last thing clicked somewhere else --> 
    {{ loadedDetails[active] }} 

</div> 

http://plnkr.co/edit/XQilKCdw0uQXvcBZ0b7a?p=preview