Passing models in AngularJS

Question

I am building my first AngularJS app comming from backbone. I have a list where the user can select an item. The goal is show the details of the selected item in a view below the list. The list-view and detail-view are both part of the main-view.

my list view

<div id="rfc-records" class="container-fluid">
    <div ng-repeat="record in records" ng-click="selectRow()" class="row select table-row">
        <div class="col-lg-1 center">
            {{record.id}}
        </div>
        <div class="col-lg-1 center">
            {{record.rfcObject}}
        </div>
        <div class="col-lg-5">
            {{record.rfcFunction}}
        </div>
        <div class="col-lg-2">
            {{record.status}}
        </div>
        <div class="col-lg-3">
            {{mii.utils.date.extToIntDate(record.firstProcessing)}}
        </div>
    </div>
</div>

As you see I already added an event to each row: ng-click="selectRow()". It is unclear to me how to know the selected row in this function. I could do something like this :

ng-click="selectRow(record)

MainController

 $scope.selectRow = function(record){
    alert(record.id); // undefined
}

The result is undefined so this does not work. Plus this seems like a bad approach to pass the model back from the view to the controller. I might be able to get the application working but I have the feeling that I won't be using the paradigm as intended.

In backbone I would have a seperate view for each row where the model is bound to. But in Angular models aren't as explicit as in backbone.

In general I don't really understand how models work in Angular. R

Regarding this example I have the following questions:

How do I know what item is selected in the list

Where should I put the selectRow function? In the controller of the Mainview or in the list-view directive?

How do I pass the selected model to the details-view.

The ng-repeat in your code will display all rows from your records list. Are you looking to display just a list of record ids and on clicking it, then move to a detail view for that record? Then come back to list and can do the same again — shivas
– shivas, Commented Apr 27, 2015 at 11:34
You should put the "selectRow" func in the controller. You dont even have your directive posted in the question. Same goes with your details-view. — gerl
– gerl, Commented Apr 27, 2015 at 13:58

dfsq · Accepted Answer · 2015-04-27 11:36:25Z

1

Well, passing current item into ngClick handler is pretty usual way to solve this task. I'm not sure why it's not working for you, it should. Here is the example of this typical approach.

In backbone I would have a seperate view for each row where the model is bound to. But in Angular models aren't as explicit as in backbone.

Actually Angular is even more elegant in this concern. You still have model available in every iterated row. You can refer current child scope as this in controller. So in your case if you don't want to pass record object into controller function on click, you can use this and it will point to the current scope object (remember that ngRepeat creates new child scope for every row):

$scope.selectRow = function() {
    alert(this.record.id);
};

and you don't have to pass anything in HTML:

ng-click="selectRow()"

Demo: http://plnkr.co/edit/kN0vB6N6v7XnqASRSmAd?p=preview

answered Apr 27, 2015 at 11:36

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anonymoose Over a year ago

Thanks, got it working! Very elegant indeed. Could you maybe also provide an answer to question 2 and 3?

hurricane · Accepted Answer · 2015-04-27 11:37:13Z

ng-click and ng-repeat are in same div. You can add a new div in this repeated div like and this is works for me :

<div id="rfc-records" class="container-fluid">
    <div ng-repeat="record in records" class="row select table-row">
        <div class="col-lg-1 center">
            Select This item<input type=button ng-click="selectRow(record)">
        </div>
        <div class="col-lg-1 center">
            {{record.id}}
        </div>
        <div class="col-lg-1 center">
            {{record.rfcObject}}
        </div>
        <div class="col-lg-5">
            {{record.rfcFunction}}
        </div>
        <div class="col-lg-2">
            {{record.status}}
        </div>
        <div class="col-lg-3">
            {{mii.utils.date.extToIntDate(record.firstProcessing)}}
        </div>
    </div>
</div>

Collectives™ on Stack Overflow

Passing models in AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related