How to set the id attribute of an array dynamically with angularjs, HTML?

Question

I am trying to get a dynamic id to my array(details) within my ng-repeat so that I can bind to different data with different view of child div. Let me show an example.

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

My problem is when I click on my parent div, I want to map child div with new data, Is it possible to set a dynamic ID in this concept?

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;
        }
};

have you thought about using $index in ng-repeat to construct the id ? — Charlie Ng, Dec 11 '17 at 20:58
There is no need to manufacture a promise with `$q.defer()` when the service already returns a promise. See [Is this a deferred Anti-Pattern](https://stackoverflow.com/questions/30750207/is-this-a-deferred-antipattern). — georgeawg, Dec 11 '17 at 22:42
See also [AngularJS Developer Guide - Why Mixing Interpolation and Expressions is Bad Practice](https://docs.angularjs.org/guide/interpolation#why-mixing-interpolation-and-expressions-is-bad-practice-) — georgeawg, Dec 11 '17 at 22:45
It looks like the code is mixing a jQuery script with an AngularJS app. That is asking for grief. The click handlers added by the `ng-click` directive will fight the click handlers added by the jQuery script. Also the `ng-repeat` directive adds DOM after the jQuery script runs, causing other problems. — georgeawg, Dec 11 '17 at 22:57

Brian · Answer 1 · 2017-12-11T21:37:47.173

One thing that is standing out is that you don't want to interpolate here.

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

to

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

Here is a rudimentary example of where I think you are trying to get.

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

How to set the id attribute of an array dynamically with angularjs, HTML?

1 Answers1