2

変数が true か false かに応じて表示する必要がある 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 は消えますが、2 番目の div は表示されません。

クリックしても 2 番目の div が表示されない理由がわかりません。誰でも手伝ってもらえますか? デバッグを通じて、実際に値がそれぞれ false / true に変更されていることがわかりますが、2 番目の div は表示されません。

2 つだけでなく一連の 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 に答える