2016-03-31 9 views
-1

誰かが自分のコードをチェックし、正しい方法でそれを作る方法を教えてもらえますか?
私は
は、事前にあなたに感謝間違いなく間違っている20個の機能を、作成する必要があり、それは動作しますが、私は20個のサブメニューを持っているならば、これは右
だとは思わないng-show正しい方法を実装する方法は?

<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 ; 
    } 
}); 
+0

'$ scope.menu'が配列だった場合は、ng-repeat – ESG

+0

を使ってループすることができます。何が変わるのですか?explain.thank – sizoider

答えて

1

ますスコープ変数を作成して、表示するメニューをキャプチャすることができます。次に、各メニューの

$scope.showMenu = 1; 

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

のように。

をクリック用:

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

のように。

+0

ありがとう、私はそれを実装しようとします – sizoider

関連する問題