更新页面的一部分上点击与angularjs [英] Update part of page on click with angularjs

问题描述

我是新来的角。如果这是一个重复的，请张贴链接。

I'm new to angular. If this is a duplicate, please post a link.

好了，我在javascript中我有一个项目列表，可以这样说：

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?

推荐答案

您可以做到这一点的贵丽一个简单的点击这样的：

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>

该指数$是NG重复真正有用的，以便管理使用数组！指数

The $index is the index of the ng-repeat really useful to mange with arrays !

您添加你想要见的人的详细信息的div：

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

});

和瞧！

工作plnkr在这里： http://plnkr.co/edit/Wg4UD6?p = preVIEW

working plnkr here : http://plnkr.co/edit/Wg4UD6?p=preview

这篇关于更新页面的一部分上点击与angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！