CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
secretwep
secretwep

Reputation: 716

How to pass or reference item from ng-repeat to another element?

I want to pass a single item/object ('ca') from a repeater to another element (in this case a modal) within the same controller context:

<div data-ng-controller="ContactActionCtrl" data-ng-app="myApp" runat="server">
  <div class="row">
    <div class="col-sm-12">
        <h2>Tasks</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>Created</th>
                    <th>Due</th>
                    <th>Completed</th>
                    <th>Created By</th>
                    <th>Assigned</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody data-ng-repeat="ca in contactactions | filter:{ObjectType:'Task'}">
                <tr data-actionid="{{ca.Id}}" data-toggle="modal" data-target="#actionDetail">
                    <td>{{ca.CreationDate | date:"MM/dd/yyyy"}}</td>
                    <td>{{ca.ActionDate | date:"MM/dd/yyyy 'at' h:mma"}}</td>
                    <td>{{ca.CompletionDate | date:"MM/dd/yyyy"}}</td>
                    <td>{{ca.CreatedByUsername}}</td>
                    <td>{{ca.UserIDUsername}}</td>
                    <td><label data-ng-if="ca.ActionType">{{ca.ActionType}} - </label><label>{{ca.ActionDescription}}</label><br>{{ca.CreationNotes | limitTo:270}}</td>
                </tr>
            </tbody>
        </table>
    </div>
  </div>
  <div id="actionDetail" class="modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{ca.ActionDescription}}</h4>
            </div>
            <div class="modal-body">
                //more details from ca here
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Everything is working, including popping up the bootstrap modal div from a row click, except for actually populating it from outside of the repeater. Since the full object is still in memory, I was hoping to avoid fetching a singular item from the db again (with a different service call) in order to fill the modal. Even though I'm showing a modal, I think this question might apply to any element / set of elements that lie outside the repeater.

Upvotes: 1

Views: 953

Answers (1)

Ynot
Ynot

Reputation: 561

I think the most straight forward way for you would be to have the modal display a different single variable e.g. 'ca.selectedItem' then when you click on an item populate selectedItem with that object. I'll see if I can whip up an example.

Controller:

$scope.contactActions = [{name:"Action 1"},{name:"Action 2"},{name:"Action 3"}] 
$scope.selectedAction = {name:""};

$scope.rowClick = function(event, selected) {
  $scope.selectedAction = selected;
};

Markup:

<tr data-actionid="{{ca.Id}}" ng-click="ca.rowClick($event, i)" data-toggle="modal" data-target="#actionDetail">

Here's a plunk.

P.S. You can use bootstrap with Angular but it uses non-angular javascript (i.e. jquery) which bypasses Angular to do things like DOM manipulation. This often results in Angular not updating it's bindings properly, so you end up doing stuff like $scope.apply() to manually tell Angular to update all it's bindings. One alternative to this would be to use UI Bootstrap which uses the same css but the javascript has been re-implemented in Angular.

Upvotes: 2

Related Questions