CODEWITHSUNDEEP
angularjs
marian
marian

Reputation: 377

Ng repeat and ng class mistake

I have some categories and subcategories.When I select category it apears subcategories.Next I want to select a subcategory of category selected but the class is changing. I want, when I select a category to be able to select a subcategory of that category.Here is the codepen :
http://codepen.io/anon/pen/GZKBaW.
Thanks for help! :)

<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">
</script>
</head>
<body  ng-controller="AppCtrl">  
    <ul class="main">
    <li  ng-repeat="a in categories" 
      ng-class="{active : toggled==$index,none:toggled!=$index}"
      ng-click="set($index)">{{a.name}}
      <ul>
         <div ng-show="showData">
           <li ng-class="{'active':event==$index,'none':event!=$index}"   ng-repeat="b in subcategories" ng-click="setSubcategory($index,b)">{{b}}</li>
           </ul>
        </li>
      </ul>
</body>
</html>

Upvotes: 1

Views: 42

Answers (1)

Jossef Harush Kadouri
Jossef Harush Kadouri

Reputation: 34207

Shouldn't access html directly,

Your'e accessing html directly and you shouldn't in your case. i would change your controller to

var app = angular.module('StarterApp', []);

app.controller('AppCtrl', ['$scope', function($scope) {

  $scope.categories = [{
    'name': 'work',
    'subcategories': ['saved', 'study', 'plm']
  }, {
    'name': 'move',
    'subcategories': ['saved', 'study', 'xxx']
  }, {
    'name': 'flirt',
    'subcategories': ['saved', 'travel', 'aaa']
  }];

  $scope.setSelectedCategory = function(category){
    $scope.selectedCategory = category;    
  }

  $scope.setSelectedSubcategory = function(subcategory){
    $scope.selectedSubcategory = subcategory;
  }
}]);

and your html to,

  <ul class="main">
    <li ng-repeat="category in categories" ng-click="setSelectedCategory(category)" ng-class="{'active' : category == selectedCategory}">  
      {{category.name}}
      <ul ng-show="category == selectedCategory">
          <li ng-class="{'active':selectedSubcategory == subcategory}" ng-repeat="subcategory in category.subcategories" ng-click="setSelectedSubcategory(subcategory)">{{subcategory}}</li>
      </ul>
    </li>
  </ul>

http://codepen.io/anon/pen/XdrPqm

Upvotes: 1

Related Questions