ng-show doğru şekilde nasıl uygulanır?

Question

Birisi kodumu kontrol edebilir ve nasıl doğru şekilde yapılabileceğini söyleyebilir mi?
i
şimdiden teşekkür ederim kesinlikle yanlıştır 20 işlevler oluşturmak gerekir, çalışıyor ama ben 20 alt menüleri olurdu eğer bu hak
olduğunu sanmıyorum

<ul class="menu-top"> 
       <li ng-click="menu2show()">drinks</li> 
       <li ng-click="menu1show()">food</li> 
       <li ng-click="menu3show()">desserts</li> 
</ul> 
<div id="menu-content" ng-controller="MenuCtrl"> 
       <div class="menu1" ng-show="show1" > 
        <div class="item" ng-repeat="item in menu.menu1"> 

        </div> 
       </div> 
       <div class="menu2" ng-show="show2" > 
        <div class="item" ng-repeat="item in menu.menu2"> 

        </div> 
       </div> 
       <div class="menu3" ng-show="show3" > 
        <div class="item" ng-repeat="item in menu.menu3"> 

         </ul> 
        </div> 
       </div> 
      </div> 


var app = angular.module('App', []); 
app.controller('MenuCtrl', function($scope) { 

    $scope.menu = { 
     menu1:[ 
       {"name":"item1", "price":"1", "desc":"aaa"}, 
       {"name":"item2", "price":"2", "desc":"bbb"}, 
       {"name":"item3", "price":"3", "desc":"ccc"}, 
      ], 
     menu2:[ 
       {"name":"item8", "price":"6", "desc":"zzz"}, 
       {"name":"item9", "price":"4", "desc":"xxx"}, 
       {"name":"item10", "price":"2", "desc":"sss"}, 
      ], 
     menu3:[ 
      {"name":"item15", "price":"3", "desc":"mmmm"}, 
      {"name":"item16", "price":"1", "desc":"nnn"}, 
      {"name":"item17", "price":"5", "desc":"bbb"}, 
     ]}; 
     $scope.show1 = true; 

    $scope.menu1show = function(){ 
     $scope.show1 = true; 
     $scope.show2 = false; 
     $scope.show3 = false; 
     } 
    $scope.menu2show = function(){ 
     $scope.show1 = false; 
     $scope.show2 = true ; 
     $scope.show3 = false; 
    } 

    $scope.menu3show = function(){ 
     $scope.show1 = false ; 
     $scope.show2 = false ; 
     $scope.show3 = true ; 
    } 
}); 

Answer 1

Sen Görüntülemek istediğiniz menüyü yakalamak için bir kapsam değişkeni yapabilir. Daha sonra her menü için

$scope.showMenu = 1; 

:

<div class="menu2" ng-show="showMenu === 2" > 
... 
<div class="menu1" ng-show="showMenu === 1" > 

vb.

Ve tıklama için

:

<li ng-click="showMenu = 2">drinks</li> 

vb.