Question

几个小时前我就开始关注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.name的数据和显示item.price的数据之间切换。

这是可以在<TD>标签的角度表达式内完成的，还是可以使用某个函数？

如果我使用普通的旧JS，我可能会做这样的事情;

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

然而，我通过创建一个＆＃39; switchField＆＃39;来尝试类似的东西。在我的控制器中运行，但Angular报告未定义＆＃39;项目。（实质上是一个范围问题），即使分别在$ scope.item.price和$ scope.item.name中定义它。

Answer 1

您可以使用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;
        }

在显示的数据之间切换

1 个答案: