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>

点击angularjs更新页面的一部分

3 个答案: