将变量传递给控制器​​功能？

Question

我想在点击一个项目时显示一些项目特定的数据。 这是我到目前为止有：

<div ng-repeat="item in items"> 
    <p ng-click="toggleDetails()">{{item.name}}</p> 
</div> 

<div ng-show="showDetails"> 
    <p>PERSON ID</p> 
    <p>PERSON NAME</p> 
    <p>other person information … </p> 
</div> 

什么是对我很重要，是我显示的数据必须是在不同的DIV那么项目列示。否则，显示/隐藏工作正常！

我用这个方法在我的控制器，以显示我的“细节” DIV：

$scope.toggleDetails = function(){ 
    $scope.showDetails = !$scope.showDetails; 
}; 

我的商品，现在在控制器静态定义是这样的：

$scope.items = [ 
    { 
     id: 0, 
     name: 'ITEM1' 
    }, 
    { 
     id: 1, 
     name: 'ITEM2' 
    }, 
    { 
     id: 2, 
     name: 'ITEM3' 
    } 
]; 

我怎样才能做到这一点？我试图将一个变量传递给toggleDetails方法，如toggleDetails（{{item.id}}），但似乎没有工作？我需要为此定义一项服务吗？ 我想保持尽可能简单，因为它是会得到太大无论如何要维持......

感谢您的帮助 - 如果我是不清楚请询问更多信息

Answer 1

你只需要添加的概念所选项目和发送之一，当您切换在：

<div ng-repeat="item in items"> 
    <p ng-click="toggleDetails(item)">{{item.name}}</p> 
</div> 

<div ng-show="showDetails"> 
    <p>{{ selectedItem.id }}</p> 
    <p>{{ selectedItem.name }}</p> 
    <p>other person information … </p> 
</div> 

JS：

$scope.selectedItem = null; 
$scope.toggleDetails = function(item){ 
    $scope.selectedItem = item; 
    $scope.showDetails = !$scope.showDetails; 
};