Angular js - basic toggle of additional object values

Question

I would like to output a basic list of names, and below the list display some text. This text should only be displayed once you've clicked on an item and it should toggle when selecting another.

What I've got so far

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

I'm pretty sure I should be using ng-click and possible the model etc but this simple task is doing my head in. I'm able to do a basic show and hide below the link (though not sure about toggling them).

Super new to angular, please excuse me if this seems like a retarded request. Looking for a super clean, quick and easy way to do this. Any input would be great.

Add a plnkr.co it will be much easier for people to give a working solution — Liviu T.
– Liviu T., Commented Sep 12, 2013 at 21:41

jjperezaguinaga · Accepted Answer · 2013-09-12 21:41:58Z

3

There are not silly questions; at some point we were all newbies :)

Controller

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

View

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

answered Sep 12, 2013 at 21:41

jjperezaguinaga

2,48215 silver badges20 bronze badges

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

3 Comments

bigmadwolf Over a year ago

intuitively I had this - but wasn't sure what to stick where - I want to up vote your answer 9000+ times for this, thank you. perfectly simple and elegant - amazing! the challenge here for me is actually "getting" angulars simplicity

m59 Over a year ago

@pushplaybang, that is often the problem for most people. :) What helps me is to just say what things do, then write that in whatever part of the app I'm talking about. For example, if I said "It displays a list of names", then write that in your html - ng-repeat="name in names". And so forth with buttons and all (don't worry about writing a function yet, just write ng-click="selectPerson(name)" and continue. Then in the controller, you'll know you need this $scope.names = myService.getNames(). And now you know you need a service to get names for you. See how easy?

bigmadwolf Over a year ago

for sure, I think thats a great approach to adopt, I'm really excited about building javascript apps, but its definitely a paradigm shift using angular, (one that I quite like).

Collectives™ on Stack Overflow

Angular js - basic toggle of additional object values

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related