@Sizoider

Как правильно реализовать ng-show?

всем привет
Пожалуиста подскажите как правильно реализовать переключающееся меню
работать то оно работает,но логика не правильная
то есть если будет 100 меню,надо будет написать 100 фунцкий,что не есть правильно
спасибо

<ul class="menu-top">
            <li ng-click="menu2show()">НАПИТКИ</li>
            <li ng-click="menu1show()">ЕДА</li>
            <li ng-click="menu3show()">ДЕССЕРТЫ</li>
</ul>
   <div id="menu-content">
                    <div class="menu1"  ng-show="show1" >
                        <div  class="item" ng-repeat="item in menu.menu1">
                            <ul>
                                <li><p class="name small-bold">{{item.name}}</p><p class="price">{{item.price | currency : "€"}}</p><p class="desc">{{item.desc}}</p><li>
                            </ul>
                        </div>
                    </div>
                    <div class="menu2" ng-controller="MenuCtrl" ng-show="show2" >
                        <div  class="item" ng-repeat="item in menu.menu2">
                            <ul>
                                <li><p class="name small-bold">{{item.name}}</p><p class="price">{{item.price | currency : "€"}}</p><p class="desc">{{item.desc}}</p><li>
                            </ul>
                        </div>
                    </div>
                    <div class="menu3" ng-controller="MenuCtrl" ng-show="show3" >
                        <div  class="item" ng-repeat="item in menu.menu3">
                            <ul>
                                <li><p class="name small-bold">{{item.name}}</p><p class="price">{{item.price | currency : "€"}}</p><p class="desc">{{item.desc}}</p><li>
                            </ul>
                        </div>
                    </div>
                </div>


var app = angular.module('App', []);
    app.controller('MenuCtrl', function($scope) {
  
        $scope.menu = {
            menu1:[
                    {"name":"item1", "price":"1", "desc":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"},
                    {"name":"item2", "price":"2", "desc":"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"},
                    {"name":"item3", "price":"3", "desc":"cccccccccccccccccccccccccccccccccc"},
                 ],
            menu2:[
                    {"name":"item8", "price":"6", "desc":"zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz"},
                    {"name":"item9", "price":"4", "desc":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"},
                    {"name":"item10", "price":"2", "desc":"sssssssssssssssssssssssssssssssssss"},
                ],
            menu3:[
                {"name":"item15", "price":"3", "desc":"mmmmmmmmmmmmmmmmmmmm"},
                {"name":"item16", "price":"1", "desc":"nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"},
                {"name":"item17", "price":"5", "desc":"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbj"},
            ]
};
      $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 ;
        }
   });
  • Вопрос задан
  • 138 просмотров
Решения вопроса 1
@lega
Сделайте одну общую переменную, "activeMenu" и по клику туда присваивайте список - содержимое меню.
Для этого вам хватит одного ng-reperat
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы