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

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