2

我有一系列 div 需要根据变量是真还是假来显示。div的代码如下：

<div ng-show="pages.quantity"></div>
<div ng-show="pages.frontSelect"></div>

和一个按钮，应该切换它们是否显示

 <a class="personalise" ng-click="updatePage('quantity','frontSelect')">
 <p>Personalise Front <i class="fa fa-caret-right"></i></p></a>

updatePage 函数如下：

$scope.updatePage = function (hide, show) {
        switch (show) {
            case "frontSelect":
                $scope.pages.frontSelect = true;
                break;
        }

        switch (hide) {
            case "quantity":
                $scope.pages.quantity = false;
                break;
        }


    }

当我单击按钮时，第一个 div 消失了，但第二个 div 没有出现。

我无法弄清楚为什么第二个 div 在点击时没有出现。有人可以帮忙吗？通过调试，可以看到确实分别改成了false/true，但是第二个div没有出现。

请注意会有一系列的 div 不只是两个，这就是为什么函数按原样设置的原因，并将对其进行扩展。

4

1 回答 1

1

假设您$scope.pages在尝试设置子键之前已经定义，它应该可以工作。

如果您在定义之前尝试设置属性$scope.pages，您只会得到一个错误，并且所需的功能将无法工作。

演示小提琴

HTML

<div ng-controller="MyCtrl">
    <div ng-show="pages.quantity">quantity</div>
    <div ng-show="pages.frontSelect">frontSelect</div> <a class="personalise" ng-click="updatePage('quantity','frontSelect')">
 <p>Personalise Front <i class="fa fa-caret-right"></i></p></a>

</div>

角度：

var myApp = angular.module('myApp', []);    
function MyCtrl($scope) {
    $scope.pages = {}; /* <---- variable defined */ 
    $scope.updatePage = function (hide, show) {
        switch (show) {
            case "frontSelect":
                $scope.pages.frontSelect = true;
                break;
        }    
        switch (hide) {
            case "quantity":
                $scope.pages.quantity = false;
                break;
        }    
   }
}

如果您希望按钮充当切换开关，您可以将 Angular 代码更改为：

演示小提琴

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
    $scope.pages = {
        frontSelect:false,
        quantity:true
    };    
    $scope.updatePage = function (hide, show) {
        switch (show) {
            case "frontSelect":
                $scope.pages.frontSelect = !$scope.pages.frontSelect;
                break;
        }
        switch (hide) {
            case "quantity":
                $scope.pages.quantity = !$scope.pages.quantity;
                break;
        }
    }
}
于 2014-04-03T11:47:04.423 回答