Pass a variable to controller function ?

Question

I want to show some item specific data when an item is clicked. This is what I have so far:

<div ng-repeat="item in items">
     <p ng-click="toggleDetails()">{{item.name}}</p>
</div>  

<div ng-show="showDetails">
    <p>PERSON ID</p>
    <p>PERSON NAME</p>
    <p>other person information … </p>
</div>

What is important for me, is that the data that I show must be in a different DIV then items are listed. Otherwise, show/hide works ok!

I use this method in my controller to show my 'details' div:

$scope.toggleDetails = function(){
    $scope.showDetails = !$scope.showDetails;
};

My items are for now defined statically in controller like this:

$scope.items = [
    {
        id: 0,
        name: 'ITEM1'
    },
    {
        id: 1,
        name: 'ITEM2'
    },
    {
        id: 2,
        name: 'ITEM3'
    }
];

How can I do this? I tried to pass a variable to toggleDetails method, like toggleDetails({{item.id}}) but that did not seem to work? Do I need to define a service for this? I want to keep it as simple as possible, since it's gonna get too big to maintain anyway…

Thanks for any help - if I was unclear please ask for more info

Davin Tryon · Accepted Answer · 2014-01-29 11:02:53Z

1

You just need to add the concept of a selected item and send that one in when you toggle:

<div ng-repeat="item in items">
     <p ng-click="toggleDetails(item)">{{item.name}}</p>
</div>  

<div ng-show="showDetails">
    <p>{{ selectedItem.id }}</p>
    <p>{{ selectedItem.name }}</p>
    <p>other person information … </p>
</div>

JS:

$scope.selectedItem = null;
$scope.toggleDetails = function(item){
    $scope.selectedItem = item;
    $scope.showDetails = !$scope.showDetails;
};

answered Jan 29, 2014 at 11:02

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

1 Comment

trainoasis Over a year ago

I should figure this one out aahh. Thank you, it works! Started with angular yesterday, so far so good!! amazing

Collectives™ on Stack Overflow

Pass a variable to controller function ?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related