Question

有人可以检查我的代码并告诉我如何以正确的方式制作它吗？它有效，但我认为这不是正确的如果我有20个子菜单，我需要创建20个功能，这绝对是错误的提前谢谢你

<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

您可以创建范围变量来捕获您希望显示的菜单。

$scope.showMenu = 1;

然后为每个菜单：

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

等等。

点击次数：

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

等等。

如何正确实施ng-show？

1 个答案: