Question

I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....

So first problem is with routing

<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>

he has supplied some javascript to handle the click on class-overview

$('.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');
});

and i have a line like this in my state provider

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

So the problem is that the ui-router handles the click and sends me back to the home page.

The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?

or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...

Answer 1

If I understand well your question, you want to display the .class-information div when you click on the .class-overview element.

That can be done by using a variable in a ng-show like this:

<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>

The display variable will be falsy when you land on the page, therefore the ng-click will be executed, this variable will be set to true.

I see that you are using a collapse class to hide the content if it is collapsed. Then you could use angular ng-class to put the collapse class when the display variable is false. Your div.class-information would look like this:

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

toggle extra detail for a record inside an ngRepeat

1 个答案: