Question

我有一系列div需要显示，具体取决于变量是true还是false。 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不仅仅是两个，这就是为什么功能按原样设置，并且会被扩展。

Answer 1

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

如果您尝试在定义$scope.pages之前设置属性，则只会出现错误，并且所需的功能将无效。

Demo Fiddle

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代码更改为：

Demo Fiddle

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;
        }
    }
}

Angular ng-show似乎没有正常工作

1 个答案:

Demo Fiddle

Demo Fiddle