Update Part Of Page On Click With Angularjs

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

Solution 1:

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

<uldata-ng-repeat="person in persons"><ling-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

Solution 2:

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

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