How to change href according to elements from an array AngularJS

Question

I want to use a collapse (from bootstrap) for each element from an array. So, I have an array extensions = ['firstCollapse', 'secondCollapse']. For each element I want to use a new collapse (there will be 2) and for this I iterate on the array, but I don't know how to modify the href to collapse each. Here is a part of code:

<div ng-repeat="ext in extensions">
   <div class="panel-group" id="accordion" ng-model="ext">
     <div class="panel panel-default">
       <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#ext" ng-bind="ext"></a>
         </h4>
       </div>
     <div id="ext" class="panel-collapse collapse in">
        <div class="panel-body">
            Body
        </div>
      </div>
     </div>
    </div>
   </div>
  </div>

I tried to modify href according to current element from array but it didn't work. How can I make this possible? Thanks a lot.

Mike Driver · Accepted Answer · 2014-09-16 20:35:39Z

1

You just need to use the double {{}} notation inside the href attribute.

EG:

<a href="{{'#' + ext}}">clicky</a>

Anything inside the {{}} will be evaluated as javascript on the current $scope.

Hope this helps.

answered Sep 16, 2014 at 20:35

Mike Driver

8,5113 gold badges38 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gangadhar Jannu · Accepted Answer · 2014-09-16 20:52:05Z

1

Use ng-href instead of normal href

and wrap the ext (model) in brackets ( {{ext}} ) like this:

<a data-toggle="collapse" data-parent="#accordion" ng-href="#{{ext}}" ng-bind="ext"></a>

answered Sep 16, 2014 at 20:52

Gangadhar Jannu

4,4626 gold badges33 silver badges55 bronze badges

Collectives™ on Stack Overflow

How to change href according to elements from an array AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related