Question

我试图在我的ng-repeat中获取动态id到我的数组（详细信息），以便我可以使用不同的div 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时，我想用新数据映射子div，是否可以在此概念中设置动态ID？

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

如何使用angularjs，HTML动态设置数组的id属性？

1 个答案: