1

i have question how to use ng-switch inside ng-repeat and use scope for switch-on ?

example : 

 <div ng-repeat="item in submenu">
            <div class="animate-switch"  ng-switch-when="{{item.filter}}">
                <div class="navbar navbar-default navbar-static-top {{item.filter}}">
                    <div  class="navbar-collapse collapse" id="navbar-{{item.filter}}">
                        <ul class="nav navbar-nav subnav">
                            <li ng-repeat="subitem in item.sub" class="items"  >
                                <a ng-href="{{subitem.link}}" class="{{selected }}" ng-click="selectfiltersub(subitem.filter)">{{item.name}}</a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

$scope.submenu :

 $scope.submenu =[{
            name:'Glasba',
            filter:'music',
            sub:[{
                name:'Koncerti',
                filter:'Concerts'
            },{
                name:'Klasika',
                filter:'Clasic'
            },{
                name:'Elektronika',
                filter:'Elektro'
            },{
                name:'Indy',
                filter:'Indy'
            },{
                name:'Teater',
                filter:'Theater'
            }]
        }]

so the problem is on ng-switch-when = "{{item.filter}}" <-- does not recognize. the output is the same as code ng-swith-when="{{item.filter}}" insted of music. What can i do ? thx for anwsers !

exmaple picture enter image description here <--upper is menu and udner 50px height is submenu with no content now ...

Maco
  • 113
  • 6
  • 12

1 Answers1

2

From ng-switch documentation:

Be aware that the attribute values to match against cannot be expressions. They are interpreted as literal string values to match against. For example, ng-switch-when="someVal" will match against the string "someVal" not against the value of the expression $scope.someVal.

Look into using ng-if instead:

<div class="animate-switch"  ng-if="item.filter === 'music'">
  filter equals 'music'
</div>
New Dev
  • 48,427
  • 12
  • 87
  • 129
  • yea ok fine solution but i would like to fill in dynamicly from $scope i would like to fill that music as an filter ..into element attribute so i dont need to put manual every 'music', 'theater' etc... – Maco Dec 06 '14 at 02:22
  • I don't understand what you are saying or trying to do. "Put as value" where? I assumed (with the answer above) that you tried to show the section when `ng-switch-when="music"` – New Dev Dec 06 '14 at 02:26
  • yes but i would like to fill out with ng-repeat... that ng-switch-when = "{{item.filter}}" <-- its not just one filter. .. i have jsut copy paste one example ... i have 9 categories... so i dont need to put 9 categories manualy and i can expande if i need just to put into array new category – Maco Dec 06 '14 at 02:29
  • i'm using menu as toggle that slides down that submenu ... and with that ng-swith-when="music" i toggle new menu under that menu. And your watching that submenu above is the example how i would do that dynamic – Maco Dec 06 '14 at 02:31
  • ps look at picture above – Maco Dec 06 '14 at 02:35
  • it's ok now its workign ... ng-if="subcategory == item.filter" <-- i used like this ! – Maco Dec 06 '14 at 02:38