这是我的HTML:
...
<table class="tickerTable">
<thead>
<th>Symbol</th>
<th>Accts</th>
</thead>
<tbody ng-repeat="ticker in tickers">
<tr ng-click="showTrades(ticker)">
<td >{{ticker.Ticker}}</td>
<td>{{ticker.TradeCount}}</td>
</tr>
<tr ng-show="currentItem == ticker">
<td colspan="2">{{trades}}</td>
</tr>
</tbody>
</table>
这是控制器:
$scope.showTrades = function(ticker){
$scope.trades = {};
$scope.currentItem = ticker;
$scope.trades = "this is the result of a rest call using the params from $scope.ticker";
};
该表填充了许多行。对于每一行,我添加一个默认隐藏的空白行。
当单击该行时,隐藏行显示动态生成的内容,该内容是使用该特定表行的“ticker”对象的参数进行的休息调用返回的。结果注入$ scope.trades并显示在现在可见的TR中。
问题:{{trades}}与所显示的行一起填充在每个隐藏行中。我只希望它在显示的行中加载。
答案 0 :(得分:0)
在您使用ng-if的plnkr中。 在表#3104中存在与ng-if相关的错误,这会导致问题。也许您可以像在发布的HTML中一样使用ng-show?
接下来,您可以将交易添加到包含的股票代码中。因此,您显示属于当前股票行情的交易。然后只有选定的股票行才会有交易。
<!doctype html>
<html ng-app='portfolio'>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">
</script>
<script src="script.js"></script>
</head>
<body>
<table ng-controller = "TickerListCtrl">
<thead>
<th>Symbol</th>
</thead>
<tbody ng-repeat="ticker in tickers">
<tr ng-click="showTrades(ticker)">
<td>{{ticker.Ticker}}</td>
</tr>
<tr >
<td ng-show="currentItem == ticker" colspan="2">{{ticker.trades}}</td>
</tr>
</tbody>
</table>
</body>
</html>
$scope.showTrades = function(ticker){
ticker.trades = "this is trades for ticker: " + ticker.Ticker;
$scope.currentItem = ticker;
};
Here是你的plnkr的一个分支,带有所描述的变化。