使用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?

Answer 1

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

Answer 2

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

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