Question

我试图切换课程＆＃34;类别活跃＆＃34;使用ng-class和ng-click进入活动类别选项卡。单击选项卡时似乎没有任何事情发生。不确定我做错了什么。请帮忙。

HTML：

<body ng-app="app">

<div class="wrap"  ng-controller="ctrl">
  <h1>Bakery Menu</h1>

  <div class="content">

      <div class="categories">
       <ul>
        <li ng-class="{'category-active' : active}">
          <a href="" ng-click="active = !active; categoryList('all')">All</a>
        </li>
        <li ng-class="{'category-active' : active}" ng-repeat="menu in menus">
          <a href="" ng-repeat="(key,val) in menu" href=""  ng-click="active = !active; categoryList(key)">{{menus}}
          </a>
        </li>
       </ul>
      </div>

  </div>

</div>
</body>

JS：

angular.module('bakeryMenuApp')
.controller('mainCtrl', function($scope, dataService) {  
  dataService.getMenus(function(response) { 
      $scope.menus = response.data.menus;
      $scope.category = 'all';
      $scope.categoryList = function(value) {
        $scope.category = value;
      }  
  });
})

JSON：

{  
"menus":[  
  {  
     "brownies":[  
        {  
           "name":"Baker's Choice Bars Assortment",
           "price":"45",
           "description":"A beautiful and delicious assortment of Magnolia Bakery’s double fudge brownies, chocolate chunk blondies and magic cookie bars.",
           "image_url":"https://pantograph0.goldbely.com/s364/uploads/product_image/image/8346/bakers-choice-bars-assortment.1ddd25a1f59a89a1de2d0583dab50000.jpg",
           "is_vegan":false,
           "is_gluten_free":false
        }
     ]
  },
  {  
     "cakes":[  
        {  
           "name":"Raseberry Lemon Cake",
           "price":"50",
           "description":"Vanilla crème fraîche cake layered with raspberry Swiss meringue buttercream and lemon curd filling, covered with raspberry buttercream.",
           "image_url":"http://www.empirecake.com/_main_site/wp-content/uploads/2014/12/Rasberry_Lemon_01_final_drkr-600.jpg",
           "is_vegan":false,
           "is_gluten_free":false
        }
     ]
  }
]
}

Answer 1

你的逻辑似乎错了。试试这个：

   <li ng-class="{'category-active':selected==='all'}">
      <a href="" ng-click="selected='all'; categoryList('all')">All</a>
    </li>
    <li ng-class="{'category-active':selected===menu}" ng-repeat="menu in menus">
      <a href="" ng-repeat="(key,val) in menu" href=""  ng-click="selected=menu; categoryList(key)">{{menus}}
      </a>
    </li>

Answer 2

我认为这与ng-repeat和范围有关。我更改了范围并使用了指令来解决它。

   <ul>
    <li ng-init="selected === 'all'" ng-class="{'category-active':selected==='all'}">
      <a sibling href="" ng-click="selected = 'all'; categoryList('all')">All</a>
    </li>
    <li ng-init="active = false"  ng-repeat="menu in menus">
      <a sibling href="" ng-repeat="(key,val) in menu" href="" ng-click="categoryList(key)">{{key}}
      </a>
    </li>
   </ul>

JS：

angular.module('bakeryMenuApp')
.directive('sibling', function () {
    return {
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.parent().parent().children().removeClass('category-active');
                element.parent().addClass('category-active');
            })
        },
    }
});

切换ng-class

2 个答案: