0

这是我的 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”对象的参数进行的 rest 调用返回的。结果被注入 $scope.trades 并显示在现在可见的 TR 中。

问题：{{trades}} 被填充在每个隐藏行以及显示行中。我只希望它加载到显示的行中。

解决方案

http://plnkr.co/edit/qFZyeuIbt6z5dYEFFHzr?p=preview

4

1 回答 1

0

在您的plnkr中，您使用的是 ng-if。表#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;   
};

这是您的 plnkr 的一个分支，其中包含所描述的更改。

于 2013-09-15T08:51:20.580 回答