javascript - 使用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>

$index 是 ng-repeat 的索引，对于管理数组非常有用！

您在要查看人员详细信息的位置添加一个 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>