Угловой js - базовый переключатель дополнительных значений объекта

Question

Я хотел бы вывести основной список имен, а под списком отобразить текст. Этот текст должен отображаться только после нажатия на элемент, и он должен переключаться при выборе другого.

То, что я получил до сих пор

<div ng-app> 
    <div ng-controller="contacts"> 
     <ul> 
      <li ng-repeat="person in people | orderBy:'name'"> 
       <a href="#">{{person.name}}</a> 
       <span>{{person.age}}</span> 

      </li> 
     </ul> 
     <div class="desc"> 
     <!-- I would like to output the descriptions here --> 
     </div> 
    </div> 
</div> 
<script> 
var contacts = function($scope) { 
    $scope.people = [ 
     {name:"paul", age:30, desc:"this is a description"}, 
     {name:"jax", age:33, desc:"this is another description right here"}, 
     {name:"yoda", age:33, desc:"final description goes here"}, 
     {name:"steve", age:53, desc:"jsut kidding - one more."} 
    ]; 
}; 
</script> 

Я уверен, что я должен использовать нг кнопкой мыши и, возможно, модель и т.д., но эта простая задача делает мою голову. Я в состоянии сделать базовое шоу и спрятаться ниже ссылки (хотя и не уверен в переключении).

Супер новый для углового, пожалуйста, извините меня, если это похоже на задержанный запрос. Ищите супер чистый, быстрый и простой способ сделать это. Любой вход будет отличным.

Answer 1

Есть не глупые вопросы; в какой-то момент мы все были новичками :)

Контроллер

var contacts = function($scope) { 
    $scope.people = [ 
     {name:"paul", age:30, desc:"this is a description"}, 
     {name:"jax", age:33, desc:"this is another description right here"}, 
     {name:"yoda", age:33, desc:"final description goes here"}, 
     {name:"steve", age:53, desc:"jsut kidding - one more."} 
    ]; 
    $scope.selectedPersonDescription = null; 
    $scope.selectPerson = function(person) { 
    $scope.selectedPersonDescription = person.desc; 
    } 
}; 

Просмотр

<div ng-app> 
    <div ng-controller="contacts"> 
     <ul> 
      <li ng-repeat="person in people | orderBy:'name'", ng-click="selectPerson(person)"> 
       <a href="#">{{person.name}}</a> 
       <span>{{person.age}}</span> 

      </li> 
     </ul> 
     <div class="desc"> 
     {{ selectedPersonDescription }} 
     </div> 
    </div> 
</div>