我正在嘗試創建一個資料串列，在串列的每一行都有一個相應的按鈕。我希望做到這一點，當用戶單擊按鈕時，它會顯示下面的資料，（使用 ng-show）僅針對該特定行。我正在考慮按鈕的線條以某種方式將“ID”保存到變數中，然后根據該 ID 過濾下表。但事實證明說起來容易做起來難。
<div ng-controller="MainCtrl">
<h1>Select relevant information from a list</h1><br>
<table>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
<tr ng-repeat = "x in userInfo">
<td>{{x.name}}</td>
<td>{{x.ID}}</td>
<td><button ng-click = "viewMore()">View More</button></td>
</tr>
</table><br><br>
<div ng-show = "showDiv">
<table><h3>Selected Information</h3>
<tr>
<th>Name (Selection)</th>
<th>Hobby (Selection)</th>
<th>ID (Selection)</th>
</tr>
<tr ng-repeat = "x in userInfo">
<td>{{x.name}}</td>
<td>{{x.hobby}}</td>
<td>{{x.ID}}</td>
</tr>
</table><br><br>
</div>
</div>
import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope) {
$scope.userInfo = [{"name":"John", "hobby":"fishing", "ID":"123"},
{"name":"Bob", "hobby":"Golf", "ID":"199"},
{"name":"Jerry", "hobby":"Football", "ID":"aAAa"}];
$scope.viewMore = function(){
$scope.showDiv = true;
}
});
https://plnkr.co/edit/u2uZ008S0Uv6TANM?open=lib/script.js&deferRun=1
uj5u.com熱心網友回復：
您可以將 id 作為引數發送到您的函式：
<button ng-click = "viewMore(x.ID)">View More</button>
然后使用該 id 在您的范圍內設定一個選定的 id 欄位 -
$scope.selectedId = null;
$scope.viewMore = function(id){
$scope.showDiv = true;
$scope.selectedId = id;
}
然后使用該 ID 過濾您的用戶 -
<tr ng-repeat = "x in userInfo | filter: { ID: selectedId }">
<td>{{x.name}}</td>
<td>{{x.hobby}}</td>
<td>{{x.ID}}</td>
</tr>
uj5u.com熱心網友回復：
您正在使用非常舊的 Angular。獲取最新的開始。然后創建一個應該重復的子組件，并將陣列中的資料提供給它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/312573.html