在显示的数据之间切换

几个小时前我已经开始关注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

在显示的数据之间切换

回答

相关问题