在顯示的數據之間切換

幾個小時前我已經開始關注AngularJS，所以我正在研究如何工作。作爲基本示例的一部分，我試圖弄清楚如何在表格中顯示的數據之間切換。在顯示的數據之間切換

目前，我有以下作爲我的基本應用程序;

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    </head> 

    <body> 
     <div ng-app="applicationMain" ng-controller="controllers.app.main"> 


      <table> 
       <tr ng-repeat="item in items"> 
        <button>Toggle</button> 
        <td>{{item.name}}<td> 
       </tr> 
      </table> 


     </div> 
    </body> 

    <script> 
     var controllers = { 
      app : { 
       main : function($scope){ 
        var s = $scope; 
        s.items = [ 
         { 
          name : "Pizza", 
          price : 100 
         }, 
         { 
          name : "Burger", 
          price : 45 
         }, 
         { 
          name : "Kebab", 
          price : 85 
         } 
        ]; 
       } 
      } 
     } 

     var app = angular.module("applicationMain", []); 
     app.controller('controllers.app.main', controllers.app.main); 


    </script> 
</html>

相當簡單。有名稱和價格字段的對象數組，其中每個對象的名稱使用ng-repeat

我想要做的是當我單擊切換按鈕時，它會切換顯示項目的數據。名稱來顯示item.price的數據。

這是可以在<TD>標記的角度表達式內完成的東西嗎，還是一個函數是要走的路？

如果我使用普通的舊JS例如，我可能會這樣做;

var activeField = item.name; 
if (activeField == item.name){ 
    activeField = item.price 
} else { 
    activeField = item.name 
}

不過，我在$ scope.item定義它，即使試圖在我的控制器創造一個「switchField」功能類似，但「項目沒有定義」（本質上是一個範圍界定問題）角報告。價格和$ scope.item.name分別。

來源

2017-02-19 Scott Pritchard

你可以做這樣的事情，使用ngClick，ngShow和ngHide：

<table> 
     <tr ng-repeat="item in items"> 
      <button ng-click="toggleIt()">Toggle</button> 
      <td ng-show="toggle">{{item.name}}<td> 
      <td ng-hide="toggle">{{item.price}}<td> 
     </tr> 
    </table>

這添加到控制器：

 s.toggle = true; 

     s.toggleIt = function() { 
      s.toggle = !s.toggle; 
     }

來源

2017-02-19 01:12:40 Serylo

奇妙的作品！我希望把它作爲一個單獨的TD並在原地修改，但它簡單而優雅。我只是稍微修改了一下，然後在按鈕中單擊，只需調用「toggle =！toggle」工程（並且不需要控制器中的功能）。 –

如果你想保持它作爲一個單一的TD，你可以試試這個：

– Serylo

在顯示的數據之間切換

回答

相關問題