переключить дополнительную информацию для записи внутри ngRepeat

Question

Я работаю над проектом, в котором клиент предоставил кучу html, где мне нужно подключить данные из нашей базы данных, и столкнулся с проблемой, которую мне трудно найти решить ....

Так первая проблема с маршрутизацией

<div ng-repeat="class in vm.classes"> 
    <div class="class-overview"> 
     <a href="#"> 
      <span class="class-title">{{class.description}}</span> 
      ... more stuff here 
     </a> 
    </div> 
    <div class="class-information collapse"> 
     <div class="full-width"> 
       {{class.longDescription}} 
     </div> 
    </div> 
</div> 

он поставил некоторые JavaScript для обработки нажмите на класс-обзор

$('.class-overview a').on('click',function(e) { 
    e.preventDefault(); 
}); 
$('.class-overview').on('click',function() { 
    $('.class-overview.active').removeClass('active').next('.class-information').collapse('hide'); 
    $(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show'); 
}); 

и у меня есть линии, как это в моем государственного провайдера

// default route 
$urlrouterProvider.otherwise("/") 

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

Идеальное решение заключается в том, чтобы оставить как можно больше его разметки, так что может ли кто-нибудь сказать мне, как я останавливаю работу с ui-router?

или в противном случае, как я мог бы использовать нг кнопкой мыши и нг-шоу, чтобы получить тот же эффект, то есть скрытие и показывая класс-информационный DIV ...

Answer 1

Если я правильно понимаю ваш вопрос, вы хотите для отображения div .class-information, когда вы нажимаете на элемент .class-overview.

Это может быть сделано с помощью переменной в ng-show как это:

<div ng-repeat="class in vm.classes"> 
    <div class="class-overview"> 
    <a href="#" ng-click="display = !display"> 
     <span class="class-title">{{class.description}}</span> 
     ... more stuff here 
    </a> 
    </div> 
    <div class="class-information" ng-show="display"> 
    <div class="full-width"> 
     {{class.longDescription}} 
    </div> 
    </div> 
</div> 

Переменная display будет falsy, когда вы приземлитесь на странице, поэтому ng-click будет выполняться, эта переменная будет установлена до true.

Я вижу, что вы используете класс collapse, чтобы скрыть содержимое, если оно было свернуто. Тогда вы можете использовать угловой ng-class, чтобы поместить класс collapse, когда переменная display является ложной. Ваш div.class-information будет выглядеть следующим образом:

<div class="class-information" ng-class="{collapse: !display}"> 
    <div class="full-width"> 
    {{class.longDescription}} 
    </div> 
</div>