Question

我有一个表，使用ng-repeat列出数组中的几个对象，我想知道，如果有一种简单的方法让用户通过单击行并在单独的{中查看它们来选择其中一个对象{1}}。

这是表格：

<div>

让我们说用户点击了第一行。他现在会看到一个<table class="table"> <tbody class="table-hover"> <tr> <th scope="col">Name</th> <th scope="col">Type</th> <th scope="col">Approver</th> </tr> <tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true"> <td>{{ campaign.name }}</td> <td>{{ campaign.type }}</td> <td>{{ campaign.approver }}</td> </tr> </tbody> </table>，其中包含该行的该行中的所有信息。

<div>

Answer 1

可以通过多种方式实现。其中一个如下。

<table class="table">
<tbody class="table-hover">
<tr>
    <th scope="col">Name</th>
    <th scope="col">Type</th>
    <th scope="col">Approver</th>
</tr>

<tr ng-repeat-start="campaign in campaigns | filter: query" contenteditable="true" ng-click="campaign.showDetails = !campaign.showDetails">
    <td>{{ campaign.name }}</td>
    <td>{{ campaign.type }}</td>
    <td>{{ campaign.approver }}</td>
</tr>
<tr ng-repeat-end ng-show="campaign.showDetails">
   Your can dispalay here rest of the information from campaign object.
</tr>
</tbody>

您可以播种示例http://codepen.io/anon/pen/beNbwp

Answer 2

好的，如果我理解您的问题，解决方案可能是使用ng-click：

（考虑每个广告系列唯一的campaign.name）

<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true" ng-click="doSmth(campaign.name)">
        <td>{{ campaign.name }}</td>
        <td>{{ campaign.type }}</td>
        <td>{{ campaign.approver }}</td>
    </tr>

然后在你的控制器中：

$scope.doSmth = function(campName) {
    $state.go(campName); //example
};

另一种解决方案，使用ui-sref：

考虑在url: '/folder/campaignPage?name'中定义$stateProvider。

<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true" ui-sref="campaignPage({ name: campaign.name })">
        <td>{{ campaign.name }}</td>
        <td>{{ campaign.type }}</td>
        <td>{{ campaign.approver }}</td>
    </tr>

Answer 3

如果你还在ng-repeat中创建按钮，那么你可以轻松地做到这一点

 <td><input type="button" value="select" class="btn btn-info btn-sm" ng-click="populate(campaign )" /></td>

然后是 $scope.populate = function (campaign) { $scope.Name = campaign.Name; }

使用简单。

AngularJS：传递数组信息

3 个答案: