CODEWITHSUNDEEP
javascriptangularjs
Mohamed Sheshtawy
Mohamed Sheshtawy

Reputation: 85

How to assign href or id by angularjs $index

I try to make collapsible panel with bootstrap and angularjs. I successfully have received data but I failed to put dynamically "href" of panel header and "id" for related body. The following html demonstrates​ how I tried to assign "href and id".

HTML

<div class="panel-group"  data-ng-repeat="Art in Articles" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" data-ng-href="go$index"><%--  here is my problem href in runtime not working --%>
                    {{Art.Art_Title}}
                </a>
            </h4>
        </div>
        <div data-ng-id="go$index" class="panel-collapse collapse"> <%-- same problem here with related id --%>

            <img data-ng-src="{{Art.Art_Pic}}" style="margin: 20px; border: 4px solid #FFFFFF; 
            width: 140px; height: 100px; float: left;" />
            <div class="panel-body" style="padding: 5px; margin: 5px; text-align: right; background-image: url('../App_Pic/bg03.jpg');">
                    {{Art.Art_Body}}
            </div>
            <button type="button" class="btn btn-primary btn-sm " style="margin-bottom: 10px">Read More ...</button>
        </div>
    </div>
</div>

Upvotes: 1

Views: 159

Answers (2)

Michał Dąbrowski
Michał Dąbrowski

Reputation: 86

If you want to combine a string and a variable inside quotation-marks in angularjs, you need to make it like a valid expression in JavaScript: 'string'+$variable <div data-ng-id="'go'+$index" class="panel-collapse collapse">

Upvotes: 1

quirimmo
quirimmo

Reputation: 9998

data-ng-href="{{'go' + $index}}"
data-ng-id="{{'go' + $index}}"

Upvotes: 0

Related Questions