CODEWITHSUNDEEP
javascriptarraysangularjshref
user3601156
user3601156

Reputation: 23

How to change href according to elements from an array AngularJS

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.

Upvotes: 1

Views: 1167

Answers (2)

Gangadhar Jannu
Gangadhar Jannu

Reputation: 4414

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>

Upvotes: 1

Mike Driver
Mike Driver

Reputation: 8511

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.

Upvotes: 1

Related Questions