Update part of page on click with angularjs

Question

I'm new to angular. If this is a duplicate, please post a link.

Ok, so I in javascript I have a list of items, lets say this:

[{
    name: 'Bob',
    age: 24,
},
{
    name: 'Smith',
    age: 56,
},
{
    name: 'Lisa',
    age: 12,
}]

All the name properties are printed out in a list at the left of the page, like this:

<li data-ng-repeat="person in persons">{{tournament.name}}</li>

All this works, but here is the thing. When I click a person in the list, I want to display more detailed information to the right of the list about that person.

If I click on Bob in the list, it should display both name and age to the right of the list.

I can't figure this out in angular. Can anyone explain how I update a part of the page with that information?

They have a really great tutorial that goes over the basics of this & many other topics. — Jay
– Jay, Commented Sep 24, 2013 at 13:27

Thomas Pons · Accepted Answer · 2013-09-24 13:34:31Z

5

You can do that with a simple click on your li like that :

<ul data-ng-repeat="person in persons">
  <li ng-click="detail($index)">{{person.name}}</li>
</ul>

The $index is the index of the ng-repeat really useful to mange with arrays !

You add a div where you want to see the person details :

  <div>
    {{personDetail.name}} {{personDetail.age}} 
  </div>

In your controller implement the detail function like that :

var app = angular.module('MyApp', []);

app.controller('MyCtrl', function($scope){

  $scope.persons = [{
                       name: 'Bob',
                       age: 24,
                    },
                    {
                       name: 'Smith',
                       age: 56,
                    },
                    {
                       name: 'Lisa',
                       age: 12,
                    }];

  $scope.detail = function(index){
      $scope.personDetail = $scope.persons[index];
  };

});

And voila !

working plnkr here : http://plnkr.co/edit/Wg4UD6?p=preview

answered Sep 24, 2013 at 13:34

Thomas Pons

7,7293 gold badges40 silver badges55 bronze badges

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

1 Comment

Maxim Shoustin Over a year ago

yep, because its not something special, +1 for plunker

AlwaysALearner · Accepted Answer · 2013-09-24 13:26:39Z

3

<!-- left -->
<li data-ng-repeat="person in persons" ng-click="obj.selected=$index">
    {{person.name}}
</li>

<!-- right -->
<div>
    {{persons[obj.selected]["name"]}}
    {{persons[obj.selected]["age"]}}
</div>

Controller:

$scope.obj = {
    selected:-1
};

answered Sep 24, 2013 at 13:26

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

2 Comments

Thomas Pons Over a year ago

it works but i think that it's a little bit difficult for him when you see his question. You have probably to explain what is $index

ptf Over a year ago

@ThomasPons Thank you, but I know index.

Maxim Shoustin · Accepted Answer · 2013-09-24 13:30:37Z

3

HTML

 <li data-ng-repeat="person in persons" ng-click="clicked(person)">

controller

 $scope.selectedNode = "";
 ...
 $scope.clicked = function(info) {
    $scope.selectedNode = info;
};

now create right side:

<div>
  <pre>{{selectedNode | json}}</pre>
</div>

answered Sep 24, 2013 at 13:30

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

1 Comment

Thomas Pons Over a year ago

It's fun to see how we can do the same thing in so much different ways

Collectives™ on Stack Overflow

Update part of page on click with angularjs

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related