如何在Angular中動態添加$ scope

Question

這是我的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

Answer 1

在您的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的一個分支。

如何在Angular中動態添加$ scope

問題描述

解

1 個解決方案

解決方案1
0 已采納 2013-09-15 08:51:20

如何在Angular中動態添加$ scope

問題描述

解

1 個解決方案

解決方案1 0 已采納 2013-09-15 08:51:20

解決方案1
0 已采納 2013-09-15 08:51:20