AngularJS - ngSwitch и ngClick не работают в ngRepeat

Question

Я хочу отобразить элементы списка благодаря ngSwitch, но я не могу понять, как это сделать с ngRepeat. Я начал, делая это без списка, просто чтобы понять, как ngSwitch работы и показать вам, что я хочу сделать, вот jsFiddle, который поможет вам понять: jdFiffle 1

Затем я пытаюсь использовать список с ngRepeat, но, что бы я ни пытался сделать, он не работает. Вот второй jsFiddle с, на этот раз, использование списка: jsFiddle 2

кажется, что ngClick и ngSwitch не работают, когда они внутри ngRepeat ... Как я могу сделать, чтобы заставить вещи работать? Заранее спасибо!

Answer 1

Некоторые проблемы:

1. При работе с угловыми директив, вы обычно не нужно использовать синтаксис {{...}}, просто использовать реальные значения. Таким образом, вместо:

   data-ng-click="sw='{{test.name}}'" 
   

   использование:

   data-ng-click="sw = test.name" 
   

   (смотрите следующий пункт, почему это не будет достаточно)

2. ng-repeat использует свою собственную сферу с включением, так выше будет установлен sw в неправильном объеме, используйте:

   data-ng-click="$parent.sw = test.name" 
   

3. вы не можете построить ng-switch-when «S с ng-repeat, попробуйте ng-show/hide вместо попробовать:

   <div ng-repeat="test in tests" ng-show="sw == test.name"> 
   

демо: http://jsbin.com/uxobot/1/

---

Но в целом, я не вижу необходимо для ng-switch/ng-repeat на втором div. Далее имеет тот же эффект, и, вероятно, намного больше семантическое:

<div ng-controller="MyCtrl"> 
    <div class="click"> 
    <div ng-repeat="test in tests" data-ng-click="$parent.active = test"> 
     {{test.name}} 
    </div> 
    </div> 

    <div class="switch"> 
    {{active.text}} 
    </div> 
</div> 

демо: http://jsbin.com/elufow/1/