AngularJS: ngClass не обновление на ngClick

Question

У меня есть функция ngRepeat напечатать некоторые дивы которых первый имеют активный класс по умолчанию и сОн мыши Я хочу, чтобы установить ДИВ щелкнула активный и другие из них с неактивный класс, и у меня есть следующий код, но я не знаю, почему он не работает.

В мой контроллер

$scope.activeSection = 0; 

На мой взгляд

<div ng-repeat="div in divs" ng-class="activeSection == $index ? 'active' : 'inactive'" ng-click="activeSection = $index"> 
    <p>Lorem......</p> 
</div> 

Проблема здесь, когда я нажмите, то ДИВ щелкнул становится активным, но не меняется последнего активированного DIV до неактивно и сохраняет активным класс вместо.

Надеюсь, вы можете мне помочь.

Answer 1

ng-repeat определяет свой собственный объем. Итак, когда activeSection = $index, что задано переменной activeSection ng-repeat. Не переменная activeSection контроллера.

Для того, чтобы решить эту проблему, определить объект в области контроллера:

$scope.sectionModel = {} 

А в представлении, использовать

ng-class="sectionModel.activeSection == $index ? 'active' : 'inactive'" ng-click="sectionModel.activeSection = $index" 

Или использовать функцию в области видимости контроллера, чтобы изменить значение activeSection.

BTW, вместо сохранения индекса активного раздела, я бы сохранил активную секцию. Это гарантирует, что ваши нг-повтор будет работать нормально, даже если он использует фильтр, который изменяет количество порядка секций:

$scope.activeSection = null; // or $scope.div[0] for example 
$scope.setActiveSection = function(section) { 
    $scope.activeSection = section; 
} 

<div ng-repeat="div in divs | orderBy:'title'" ng-class="activeSection === div ? 'active' : 'inactive'" ng-click="setActiveSection(div)"> 
    <p>Lorem......</p> 
</div> 

Answer 2

Причина в том, ngRepeat создаст свою собственную $scope - так что вы на самом деле не обновляя activeSection вы думаете - вы создаете другую переменную activeSection на ngRepeat области видимости (ребенка). Один из способов обойти это использовать $parent (некрасиво) - или просто вызвать функцию на контроллере, чтобы обеспечить право $scope достигается:

$scope.setActive = function(index) { 
    $scope.activeSection = index; 
} 

Вид:

<div ng-repeat="div in divs" ng-class="activeSection == $index ? 'active' : 'inactive'" ng-click="setActive($index)"> 
    <p>Lorem......</p> 
</div> 

Определенно прочитал этот пост о $scope и наследование: What are the nuances of scope prototypal/prototypical inheritance in AngularJS?