Обновить часть страницы при щелчке с angularjs

Question

Я новичок в угловой. Если это дубликат, отправьте ссылку.

Хорошо, так что я в JavaScript У меня есть список элементов, позволяет сказать:

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

Все name свойства распечатываются в списке в левой части страницы, как это:

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

Все это работает, но вот что. Когда я нажимаю на человека в списке, я хочу отобразить более подробную информацию справа от списка об этом человеке.

Если я нажму на Bob в списке, он должен отображать как name, так и age справа от списка.

Я не могу понять это в угловом. Может ли кто-нибудь объяснить, как я обновляю часть страницы с помощью этой информации?

Answer 1

Вы можете сделать это с помощью простого щелчка на вашем Li подобное:

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

$ индекс является индексом нг-повтора действительно полезным для чесотки с массивы!

Вы добавляете DIV, где вы хотите, чтобы увидеть детали лицо:

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

В контроллере реализовать функцию детали так:

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

}); 

И вуаля!

работает plnkr здесь: 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> 

Контроллер:

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

Answer 3

HTML

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

Контроллер

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

Теперь создать правую сторону:

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